vue 中英文切换
- 下载vue-i18n:官网地址:https://vue-i18n.intlify.dev/
- 命令:npm i vue-il8n@8.23.0 / cnpm i vue-i18n@8.23.0 vue2请指定8或8以下的版本,否则可能解析错误vue3可以不用指定。
- 在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()
- .切换后刷新方法
1.刷新页面
location.reload();//类似于使用F5
2.无感刷新
在切换按钮页面映入language的index.js 文件
import i18n from ‘…/./…/language’
切换时
i18n.locale = ‘zh’/‘en’ - 使用方法
<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>