Vue I18n如何加载不同目录多语言文件实现性别适配且动态更新

问题根因 #

• require.context是webpack编译阶段执行的API，不支持运行时根据用户性别等动态变量返回不同路径的文件集合，你当前的写法在编译阶段就已经把路径解析固定了，运行时切换性别/语言不会触发重新加载
• i18n实例初始化时只执行了一次loadLocaleMessages，后续状态变化没有主动更新i18n的messages配置

可行解决方案 #

第一步：调整语言包加载逻辑，取消动态require.context #

提前把所有语言包的加载逻辑写死，避免编译时API的限制：

import Vue from "vue";
import VueI18n from "vue-i18n";
import { DEFINES } from "@/defines";
import { store } from "@/store";

Vue.use(VueI18n);

// 预引入所有通用、男女专属语言包
const commonMessages = {
  en: require('./locales/en.json')
}
const femaleMessages = {
  he: require('./locales/female/he.json'),
  ar: require('./locales/female/ar.json')
}
const maleMessages = {
  he: require('./locales/male/he.json'),
  ar: require('./locales/male/ar.json')
}

第二步：封装动态更新i18n配置的方法 #

写一个可以根据当前用户性别、语言刷新i18n messages的方法：

// 新增刷新语言配置的方法
export const refreshI18nConfig = () => {
  const user = store.state.user.user
  const messages = { en: commonMessages.en }
  // 非英语场景加载对应性别语言包
  if (Object.entries(user).length && user.user_lang !== 'en') {
    const genderMessages = user.gender === 'female' ? femaleMessages : maleMessages
    Object.assign(messages, genderMessages)
  }
  // 更新i18n实例的messages
  Object.keys(messages).forEach(lang => {
    i18n.setLocaleMessage(lang, messages[lang])
  })
  // 同步设置当前语言
  i18n.locale = user.user_lang || DEFINES.I18N_LOCALE || 'en'
}

export const i18n = new VueI18n({
  locale: DEFINES.I18N_LOCALE || "en",
  fallbackLocale: DEFINES.I18N_FALLBACK_LOCALE || "en",
  silentFallbackWarn: true,
});

// 初始化时执行一次配置加载
refreshI18nConfig()

第三步：监听store状态变化，自动触发配置刷新 #

在项目入口文件main.js中添加监听逻辑，用户性别、切换语言时自动更新多语言配置：

import { store } from '@/store'
import { refreshI18nConfig } from '@/i18n'

// 监听用户信息（性别）变化
store.watch(
  state => state.user.user,
  () => refreshI18nConfig(),
  { deep: true }
)
// 监听语言切换
store.watch(
  state => state.user.user.user_lang,
  () => refreshI18nConfig()
)

可选优化 #

如果语言包体积较大不想全量预加载，可以把预加载改成异步import，切换时再加载对应语言包，加载完成后再调用setLocaleMessage更新即可。

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