在Pug引入的JS文件中无法使用i18n函数#{__('Hello')}求解决方案

这问题我之前踩过坑，核心原因是script include是直接把JS文件原封不动塞进页面里，Pug根本不会去解析里面的#{__('...')}插值语法——毕竟那是Pug模板专属的语法，原生JS可不认它。下面几个实用方案，你按需选：

方案一：把i18n翻译值/函数挂载到全局对象 #

这个方案最简单，适合小型项目或者快速解决问题：

1. 在你的index.pug里，提前把需要的i18n内容挂载到window全局对象上：

// 方法1：提前定义需要的翻译变量（推荐，避免函数序列化问题）
script.
  window.i18n = {
    hello: #{JSON.stringify(__('Hello'))},
    // 把coupon.js需要的其他翻译项都放这里
  };

// 方法2：直接挂载i18n函数（如果服务端允许序列化函数的话）
script.
  window.__ = #{__};

2. 然后在coupon.js里直接调用全局变量/函数：

// 用预定义变量的方式
console.log(window.i18n.hello);

// 用全局函数的方式
console.log(window.__('Hello'));

注意：用JSON.stringify是为了确保翻译字符串在JS里是合法的，避免引号转义出错。

方案二：把JS文件改成Pug模板文件 #

如果你的JS代码不多，可以直接把它改成Pug的script块，让Pug编译时解析插值：

1. 把coupon.js重命名为coupon.pug，内容改成Pug的script块格式：

script.
  // 这里可以直接用Pug的插值语法了
  const greeting = #{JSON.stringify(__('Hello'))};
  console.log(greeting);
  // 其他原有JS代码不变，需要插值的地方用#{...}即可

2. 在index.pug里引入这个Pug文件：

include ../../public/js/coupon.pug

这样Pug编译时会自动把插值替换成对应的翻译内容，生成正确的JS代码。

方案三：用构建工具注入翻译值（适合大型项目） #

如果你的项目用了Webpack/Vite这类构建工具，可以在构建阶段把i18n翻译值注入到JS中，不需要依赖全局变量：

1. 配置构建工具的环境变量插件（以Webpack为例）：

// webpack.config.js
const webpack = require('webpack');
// 加载你的i18n翻译文件（根据你的项目实际路径调整）
const translations = require('./src/i18n/en.json');

module.exports = {
  // 其他配置项...
  plugins: [
    new webpack.DefinePlugin({
      // 把翻译值定义为全局常量
      'I18N_HELLO': JSON.stringify(translations['Hello']),
      // 其他需要的翻译项同理
    }),
  ],
};

2. 在coupon.js里直接使用定义好的常量：

console.log(I18N_HELLO);

这个方案更规范，适合需要统一管理翻译资源的大型项目。

额外方案：使用客户端i18n库 #

如果你的项目是前后端分离的，可以直接用客户端i18n库（比如i18next）：

1. 在页面中引入i18next库并初始化，加载对应的翻译资源；
2. 在coupon.js里直接调用库的API获取翻译：

// 初始化后直接调用
console.log(i18next.t('Hello'));

这种方式完全脱离服务端Pug的插值，更适合纯前端的场景。

内容的提问来源于stack exchange，提问作者Dang Thach Hai