构建 VueJs 项目时排除翻译答案

【问题标题】：Exclude translation when build VueJs project构建 VueJs 项目时排除翻译
【发布时间】：2021-12-25 15:56:05
【问题描述】：

我有一个使用 vue-i18n 进行翻译的项目。该项目发布在 2 个服务器上，服务器 1 只有英文，服务器 2 只有瑞典语。现在我想排除不需要的语言。在服务器 1 上，我想排除瑞典语并且只加载英语，服务器 2 排除英语并且只加载瑞典语。那可能吗？我在组件和 locales/*.json 文件中有翻译。

在我的 i18n 设置文件中：

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

Vue.use(VueI18n)

function loadLocaleMessages () {
  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]
       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
})

在我的 vue.config.js 文件中：

pluginOptions: {
  i18n: {
    locale: process.env.VUE_APP_LANG,
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE,
    localeDir: "locales",
    enableInSFC: true,
  },
},

【问题讨论】：

标签： javascript vue.js webpack

【解决方案1】：

一种解决方案是部署一个配置文件，该文件指定启用哪些语言环境。然后应用程序可以获取该文件，并读取配置以确定要加载哪些语言环境消息。

例如，在您的静态目录中部署 config.json（例如，在 Vue CLI 脚手架项目中部署 public/）。

服务器 1：仅英文

// public/config.json
{
  "locales": ["en"]
}

服务器 2：仅限瑞典语

// public/config.json
{
  "locales": ["sv"]
}

应用：

// i18n.js
async function loadLocaleMessages () {
  const locales = require.context('@/locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}

  const res = await fetch(process.env.VUE_APP_BASE_URL + '/config.json')
  const config = await res.json()

  locales.keys()
   .filter(locale => config.locales.includes(locale)) ?
   .forEach(key => {
     const matched = key.match(/([A-Za-z0-9-_]+)\./i)
     if (matched && matched.length > 1) {
       const locale = matched[1]
       messages[locale] = locales(key)
     }
   })

  return messages
}

插件必须是async:

// i18n.js
export default async () => {
  return new VueI18n({
    locale: process.env.VUE_APP_LANG || 'en',
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
    messages: await loadLocaleMessages(),
    silentFallbackWarn: true
  })
}

// main.js
import i18n from './i18n'

(async() => {
  new Vue({
    i18n: await i18n()
  })
})()

【讨论】：

问题是其他翻译还在源代码中。我想最小化文件大小，因此我只想加载一种语言。