vue 中英文切换

vue 中英文切换

1. 下载vue-i18n：官网地址：https://vue-i18n.intlify.dev/
2. 命令：npm i vue-il8n@8.23.0 / cnpm i vue-i18n@8.23.0 vue2请指定8或8以下的版本，否则可能解析错误vue3可以不用指定。
3. 在src文件下创建language文件夹，并创建index.js、zh.js、en.js等三个文件夹
   4.index.js内容

import Vue from 'vue' // 引入vue
import VueI18n from 'vue-i18n' // 引入i18n模块
//未使用elementUI可以不需要要引入
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui英文包 
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui中文包
import locale from 'element-ui/lib/locale' // 引入elementuiui语言包模块
//
import enLocale from './en' // 本地英文包
import zhLocale from './zh' // 本地中文包

Vue.use(VueI18n) // vue使用i18n模块
// 引入本地
const messages = {
  en: {
    ...enLocale, // es6的拓展运算符，相当于解析出每个对象
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
// 把中英文设置存储在本地缓存中方便动态更改
let language = sessionStorage.getItem('theLanguage') ? sessionStorage.getItem('theLanguage') : 'zh'
// 创建国际化实例
const i18n = new VueI18n({
  locale: language, // set locale，默认中文
  messages // set locale messages。语言包
})
locale.i18n((key, value) => i18n.t(key, value))
export default i18n

5.en.js和zh.js为对应关系，参数对应一致否则无法转换

//zh.js
export default {
  basic: {
    development:'拼命开发',
  },
  }

//en.js
export default {
  basic: {
    development:'In development',
  },
}

6.挂载到main.js中

import Vue from 'vue'
import App from './App.vue'
import i18n from './language'
new Vue({
  i18n,
  render: h => h(App),
  // 添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

function rewirteLog () {
  if (process.env.NODE_ENV === 'production') {
    console.log = function () {}
  }
}
rewirteLog()

7. .切换后刷新方法
   1.刷新页面
   location.reload();//类似于使用F5
   2.无感刷新
   在切换按钮页面映入language的index.js 文件
   import i18n from ‘…/./…/language’
   切换时
   i18n.locale = ‘zh’/‘en’
8. 使用方法

 <router-link tag="li" to="index" active-class="active"
            >{{$t("header.home")}} </router-link
          >
          <router-link tag="li" to="product" active-class="active"
            >{{$t("header.products")}}</router-link>