如何通过Laravel Mix在编译时实现Vue-i18n翻译？

核心思路 #

要在编译阶段把翻译硬编码进Vue组件，就得利用vue-loader的自定义编译器选项或预处理器钩子，在模板和脚本编译完成前把翻译内容直接替换进去，彻底避免运行时加载翻译资源。

具体实现步骤 #

1. 整理翻译资源 #

先把多语言文件（比如lang/en.json、lang/zh.json）存成JSON格式，方便编译时读取：

// lang/zh.json
{
  "welcome": "欢迎访问",
  "button_text": "点击这里"
}

2. 配置Laravel Mix的vue-loader自定义规则 #

在webpack.mix.js里扩展webpack配置，修改vue-loader的选项，添加模板和脚本的预编译钩子：

const fs = require('fs');
const path = require('path');

// 读取当前语言的翻译文件（可根据Jigsaw环境变量动态切换）
const currentLang = process.env.LANG || 'zh';
const translations = JSON.parse(fs.readFileSync(path.resolve(__dirname, `lang/${currentLang}.json`), 'utf8'));

mix.js('source/js/app.js', 'assets/js')
  .webpackConfig({
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            // 模板编译前的预处理逻辑
            compilerOptions: {
              modules: [
                {
                  preTransformNode(el) {
                    // 匹配模板里的{{ $t('key') }}语法
                    if (el.type === 2 && el.expression.includes('$t(')) {
                      const key = el.expression.match(/\$t\('([^']+)'\)/)[1];
                      el.expression = `"${translations[key] || key}"`;
                      console.log(`模板翻译替换: ${key} -> ${translations[key]}`);
                    }
                    return el;
                  }
                }
              ]
            },
            // 脚本部分的预处理
            preLoaders: {
              js: function(source) {
                // 匹配脚本里的this.$t('key')语法
                const replacedSource = source.replace(/this\.\$t\('([^']+)'\)/g, (match, key) => {
                  console.log(`脚本翻译替换: ${key} -> ${translations[key]}`);
                  return `"${translations[key] || key}"`;
                });
                return replacedSource;
              }
            }
          }
        }
      ]
    },
    plugins: [
      require('vue-loader/lib/plugin')
    ]
  });

3. 组件内直接用翻译标记 #

在Vue单文件组件里，直接写{{ $t('welcome') }}或脚本里的this.$t('button_text')，编译时会被自动替换成对应翻译文本：

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <button @click="handleClick">{{ $t('button_text') }}</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert(this.$t('button_text'));
    }
  }
}
</script>

4. 排查无日志输出问题 #

如果控制台没日志，按这几点检查：

• 先在webpack.mix.js最外层加个console.log('Mix配置加载中')，确认配置文件被正确执行；
• 核对vue-loader版本：Vue2对应vue-loader@15.x，Vue3对应vue-loader@16.x，不同版本的compilerOptions结构有差异；
• 确认.vue文件路径被Mix正确覆盖，没有被其他规则拦截；
• 清理Mix缓存：运行npm run clean后重新编译，避免旧缓存干扰。

5. 进阶：和Jigsaw语言环境联动 #

在Jigsaw的bootstrap.php里设置环境变量，让Mix自动匹配当前编译的语言：

// bootstrap.php
putenv("LANG=" . $app->getLocale());

这样编译时process.env.LANG会自动读取Jigsaw的当前语言，无需手动切换翻译文件。

内容的提问来源于stack exchange，提问作者Utpal Sarkar