为什么vue3的vue-i18n（版本^12.0.0-alpha.2）在开发环境能正常渲染出中英文，但是生产环境只显示message.hello的标记呢？

Question

为什么vue3的vue-i18n（版本^12.0.0-alpha.2）在开发环境能正常渲染出中英文，但是生产环境只显示message.hello的标记呢？

不知道如何尝试去调试问题

Answer 1

可能原因及解决方案

---

1. 生产构建压缩问题

现象：开发环境正常但生产环境显示原始key（如message.hello）
原因：构建工具（如Vite/Rollup）可能启用了代码压缩（如terser），破坏了Vue I18n的运行时解析逻辑
解决方案：
在构建配置中禁用i18n相关代码的压缩：

// vite.config.js
export default {
  build: {
    terserOptions: {
      keep_classnames: true,
      keep_fnames: /MessageCompiler/
    }
  }
}

---

2. 异步语言包未正确加载

现象：生产环境未加载完整的语言包
排查：

• 检查网络请求是否成功加载语言文件（如en.json/zh-CN.json）

• 确认语言包路径配置正确：

  // 生产环境需要绝对路径
  createI18n({
  legacy: false,
  locale: 'en',
  messages: {
    en: () => import('/src/locales/en.json'), // 确保路径正确
    zh: () => import('/src/locales/zh-CN.json')
  }
  })

---

3. Fallback 配置缺失

现象：当翻译缺失时直接显示key
修复：明确配置fallback语言：

createI18n({
  legacy: false,
  fallbackLocale: 'en', // 指定默认fallback语言
  missingWarn: false,
  fallbackWarn: false
})

---

4. 版本兼容性问题

排查步骤：

1. 检查是否使用正确的Vue3兼容版本：

   npm install vue-i18n@^9.0.0 --force  # 推荐稳定版

2. 查看官方已知问题：

   vue-i18n v12 Alpha Issue #1456

---

调试技巧

1. 生产环境日志：

   // main.js
   const i18n = createI18n({ /* ... */ })
   app.use(i18n).mount('#app')
   
   // 直接输出调试
   console.log(i18n.global.t('message.hello'))

2. 构建产物分析：
   运行npm run build后检查dist/assets目录中的语言文件是否被正确打包。
3. 最小化复现：
   创建一个仅包含i18n的干净项目验证问题是否仍存在。