独立Vue2 SPA项目如何加载locales目录下的JSON国际化翻译文件

核心问题解答 #

require.context是webpack专属的API，和你引入的CDN版require.js完全不相关，require.js是AMD规范的模块加载器，本身不提供require.context能力，也不需要额外引入browserify，用浏览器原生fetch API即可实现需求。

你可以通过原生fetch动态加载同目录下locales文件夹的JSON翻译文件，不需要构建工具介入，完全满足你自动化翻译的流程要求。

方案1：初始化全量加载所有翻译 #

适合翻译文件体积小、支持语言少的场景，优点是切换语言无延迟，缺点是首次加载会多发起几个JSON请求。

const base_url = window.location.origin;
console.log('base url', window.location.origin)

// 配置项：填你所有支持的语言，和locales下的JSON文件名一一对应（去掉.json后缀）
const SUPPORTED_LOCALES = ['de', 'en']
const LOCALE_PATH = './locales/'

// 批量加载所有翻译文件
async function loadAllLocaleMessages() {
  const messages = {}
  for (const locale of SUPPORTED_LOCALES) {
    const res = await fetch(`${LOCALE_PATH}${locale}.json`)
    messages[locale] = await res.json()
  }
  return messages
}

// 等翻译加载完成后再初始化Vue实例
loadAllLocaleMessages().then(messages => {
  const i18n = new VueI18n({
    locale: 'de', // 默认语言
    messages: messages
  });

  const vueApp = new Vue({
    el: '#app',
    i18n:i18n,
    data: { 
     display: 'data...' 
    },
    mounted () {
     console.log('store accessed', this.display)
    },
    methods: {
     change_language: function (event) {
      event.preventDefault();
      this.$i18n.locale = event.target.value
      }
  }
  })
})

方案2：按需加载翻译 #

适合翻译文件体积大、支持语言多的场景，优点是首次加载只请求默认语言的翻译，启动速度更快，缺点是第一次切换非默认语言会有短暂等待，可加加载状态提示优化体验。

const base_url = window.location.origin;
console.log('base url', window.location.origin)

const LOCALE_PATH = './locales/'

// 加载单个语言的翻译文件
async function loadSingleLocale(locale) {
  const res = await fetch(`${LOCALE_PATH}${locale}.json`)
  return await res.json()
}

// 初始化时仅加载默认语言
loadSingleLocale('de').then(deMsg => {
  const i18n = new VueI18n({
    locale: 'de',
    messages: {
      de: deMsg
    }
  });

  const vueApp = new Vue({
    el: '#app',
    i18n:i18n,
    data: { 
     display: 'data...',
     loadingLang: false // 加载状态，防止重复点击切换
    },
    mounted () {
     console.log('store accessed', this.display)
    },
    methods: {
     async change_language (event) {
      event.preventDefault();
      const targetLang = event.target.value
      // 语言相同或正在加载中直接返回
      if (targetLang === this.$i18n.locale || this.loadingLang) return
      // 已加载过该语言直接切换
      if (this.$i18n.messages[targetLang]) {
        this.$i18n.locale = targetLang
        return
      }
      // 未加载过则请求翻译文件
      this.loadingLang = true
      try {
        const langMsg = await loadSingleLocale(targetLang)
        this.$i18n.setLocaleMessage(targetLang, langMsg)
        this.$i18n.locale = targetLang
      } catch (err) {
        console.error('翻译文件加载失败：', err)
      } finally {
        this.loadingLang = false
      }
     }
  }
  })
})

注意事项 #

• 确保你引入的VueI18n是适配Vue2的8.x版本，不要使用适配Vue3的9.x及以上版本
• 本地开发时不要直接打开本地index.html文件，要用静态服务启动（比如VSCode的Live Server插件），否则会出现跨域问题无法加载JSON文件
• 部署时要将locales目录和index.html一起上传到服务器，保证路径可访问

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