vue2项目进行国际化, 使用 vue-i18n的基础流程

下载

首先, 下载和vue2版本相搭配的vue-i18n的版本

   npm install vue-i18n@8 --save 
   // 或者
   yarn add vue-i18n@8

引入

在项目中创建一个文件来存储不同语言的翻译文本，通常以 JSON 格式。可以先创建一个 locales 目录，并在其中创建不同语言的 JSON 文件，如 en.json 和 zh.json, 并在其中进行翻译文本的准备

前置的名字就是在项目中使用的变量, 我这里使用中文代替, 也可以使用英文格式 然后就是在main.js文件中进行引入和配置了

import Vue from 'vue'
import App from './App.vue'
 // 国际化
import VueI18n from 'vue-i18n'  //引入下载的vue-i18包
import enLocale from './locales/en.json'
import zhLocale from './locales/zh.json'

Vue.use(VueI18n)               // 注册并对翻译的语法进行转化 $t
const messages = {             // 版本对象
  en: enLocale,                  
  zh: zhLocale
}

const i18n = new VueI18n({
  locale: 'zh', // 默认语言    // 默认语言
  messages
})

new Vue({
  i18n,                       // 挂载
  render: h => h(App)
}).$mount('#app')

使用

接下来就是使用了, 代码层面是插值表达式加 $t(''), 记住$t('')的括号里是单引号

可以通过按钮进行文本切换的 记得对文本样式做一定适配

   function change() {
       this.$i18n.locale = zh 或者 this.$i18n.locale = en // 这样就可以完成中英文切换了
   }

在其他文件中使用时 可以导出一个i18n的组件实例

// 非 vue 文件中使用这个方法
export const translate = (localeKey) => {
  
      const hasKey = i18n.te(localeKey, i18n.locale)  // 使用i18n的 te 方法来检查是否能够匹配到对应键值
      const translatedStr = i18n.t(localeKey)
      if (hasKey) {
          return translatedStr
      }
      return localeKey
}

(这个方法有个小弊端, 只有首次进入会生效, 如果想要实现按钮切换, 需要强制刷新页面, 暂无更好解决办法, 望各位大佬告知)