Vue.js项目构建时如何排除不需要的vue-i18n多语言包适配不同部署服务器

该需求完全可以实现，可通过环境变量区分构建目标、过滤语言包加载、配合vue-i18n插件配置三个步骤完成，最终实现两个构建版本分别仅包含对应语言的翻译内容，无冗余资源。

步骤1：新增环境变量配置文件 #

在项目根目录下新增两个构建专用的环境变量文件：

• .env.build-en（英文版本构建用）

VUE_APP_LANG = 'en'
VUE_APP_I18N_FALLBACK_LOCALE = 'en'

• .env.build-sv（瑞典语版本构建用）

VUE_APP_LANG = 'sv'
VUE_APP_I18N_FALLBACK_LOCALE = 'sv'

步骤2：新增构建命令 #

修改package.json的scripts字段，新增两个对应语言的构建命令：

"scripts": {
  // 保留原有其他命令，新增如下两行
  "build:en": "vue-cli-service build --mode build-en",
  "build:sv": "vue-cli-service build --mode build-sv"
}

后续构建对应版本时，执行对应命令即可：

• 服务器1部署包执行：npm run build:en
• 服务器2部署包执行：npm run build:sv

步骤3：修改语言包加载逻辑，过滤非目标语言 #

修改你的i18n配置文件，调整loadLocaleMessages函数，只加载和当前构建目标一致的语言包：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () {
  // 取当前构建的目标语言
  const targetLang = process.env.VUE_APP_LANG || 'en'
  const locales = require.context('@/locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
     const matched = key.match(/([A-Za-z0-9-_]+)\./i)
     if (matched && matched.length > 1) {
       const locale = matched[1]
       // 仅加载目标语言的配置文件，其他语言直接跳过不打包
       if (locale === targetLang) {
         messages[locale] = locales(key)
       }
     }
   })
  return messages
}

export default new VueI18n({
  locale: process.env.VUE_APP_LANG || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
  silentFallbackWarn: true
})

步骤4：修改vue.config.js配置，剥离单文件组件内的冗余翻译 #

在pluginOptions.i18n配置中新增includeLocales字段，指定仅打包当前目标语言的单文件组件内翻译内容，自动剔除其他语言的翻译块：

pluginOptions: {
  i18n: {
    locale: process.env.VUE_APP_LANG,
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE,
    localeDir: "locales",
    enableInSFC: true,
    // 新增配置：仅包含当前构建的目标语言
    includeLocales: [process.env.VUE_APP_LANG]
  },
},

效果验证 #

构建完成后可检查打包后的静态资源文件，英文版本中不会出现任何瑞典语翻译内容，瑞典语版本也不会出现英文翻译内容，完全符合两台服务器的部署要求。

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