问题描述:
在vue使用 vue-i18n 的时候发现支付直接安装 npm i vue-i18n 的时候报错,因为他默认安装的是最新的版本,所有适合vue3不适合vue2的项目。
解决:
第一步:
npm i vue-i18n@8.27.0 -D
第二步:引入vue-i8n和语言包,在工程下新建文件放入如下代码:
第三步:在vue项目目录下的main.js里面挂载
import i18n from '@/lang'
//注册elementUI的组件,并设置element为当前的语言
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value) //当切换 locale 的时候,t()函数会根据传入的key值去locale指定的语言包中找响应的值
}
})
new Vue({
el: '#app',
i18n,
render: h => h(App)
})
第四步:en.js文件里面配置英文
export default {
route: {
dashboard: 'Dashboard',
manage: 'manage',
users: 'users',
menus: 'menus'}
}
第五步:zh.js文件里面配置中文
//zh.js 语言包中导出的语言包内容
export default {
route: {
dashboard: '首页',
manage: '后台管理',
users: '用户管理',
menus: '菜单管理',
logs: '日志管理',
example: '示例',
table: '数据列表'
}
}
第六步:设置切换语言
methods: {
changeLanguage(type) {
// 设置的类型 先写入到cookie
Cookie.set('language', type) // 写入cookie缓存
// 改变当前的多语言
this.$i18n.locale = type // 将当前的多语言类型改成对应的类型
this.$message.success('切换多语言成功')
}
}
整个流程完了。感觉新手小白还是不好理解。这边参考的这个文章完善的:vue2/element项目多语言(插件i8n) - Fen~ - 博客园