Vue3 CLI项目vue-i18n生产环境失效及开发环境警告解决咨询

1. 配置Webpack Feature Flags（解决警告+生产环境失效） #

在vue.config.js中添加Webpack的DefinePlugin配置，显式设置vue-i18n的特性开关，避免Tree-Shaking误删核心代码：

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        __VUE_I18N_FULL_INSTALL__: true,
        __VUE_I18N_LEGACY_API__: false,
        __INTLIFY_PROD_DEVTOOLS__: false
      })
    ]
  }
})

各开关作用：

• __VUE_I18N_FULL_INSTALL__：确保完整加载vue-i18n所有功能模块
• __VUE_I18N_LEGACY_API__：禁用旧版API，与你配置的legacy: false保持一致
• __INTLIFY_PROD_DEVTOOLS__：生产环境关闭调试工具，减少打包体积

2. 确认vue-i18n版本兼容性 #

确保安装的是适配Vue3的vue-i18n v9.x版本，执行以下命令检查或升级：

# 查看当前版本
npm list vue-i18n

# 升级到最新稳定版（若版本低于v9）
npm install vue-i18n@latest

3. 优化组件内i18n使用（可选） #

建议在子组件中直接通过useI18n获取翻译函数，避免全局依赖可能的打包异常：

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

<template>
  <div>{{ t('message.hello') }}</div>
</template>

4. 清理缓存重新构建 #

修改配置后，清理缓存并重新构建生产包：

# 清理Vue CLI缓存
npm run clean

# 重新构建生产环境
npm run build

完成以上步骤后，开发环境的警告会消失，生产环境的i18n功能即可正常工作。

内容的提问来源于stack exchange，提问作者Баястан Нурбек