vue项目中使用 vue-i18n 实现多语言切换功能
在项目中需要实现多语言切换功能，有很多实现方法，以下将介绍使用vue-i18n来实现。
Vue I18n 参考文档
1. 安装 vue-i18n 依赖包
npm install --save vue-i18n
2. 配置zh-CN和en-US文件
在api/languages中配置对应zh-CN.json和en-US.json需要切换的中英文文件
// zh-CN.json
{
"langName": "中文",
"menuList": {
"home": "主页",
"user": "用户管理",
"roles": "角色管理",
"notice": "通知公告",
"logs": "日志管理"
}
}
// en-US.json
{
"langName": "en-US",
"menuList": {
"home": "Home",
"user": "User management",
"roles": "Role management",
"notice": "Notice Announcement",
"logs": "log management"
}
}
3. 在main.js中全局挂载 i18n的插件
在main.js中做全局引入，注意：引入正确的资源文件
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh-CN', // 将要切换的语言，可以通过url拼的参数获取，用户行为select选择获取，本地manifest配置获取等，根据场景动态获取
messages: {
'zh-CN': require('./api/languages/zh-CN.json'), // 本地资源文件，我这里配2个语言，中文&英文，src下根据个人情况放置
'en-US': require('./api/languages/en-US.json')
}
});
const vm = new Vue({
el: '#app',
i18n,
store,
router,
render: c => c(App),
});
4. 在页面中使用
// template中直接使用
<template>
<div class="menuWrap">
<div class="menuInner">
{
{
$t('menuList.home') }}
</div>
<div class="menuInner">
{
{
$t('menuList.user') }}
</div>
<div class="menuInner">
{
{
$t('menuList.roles') }}
</div>
</div>
</template>
// script中直接使用
<script>
export default {
data () {
return {
langName: '',
}
},
created () {
this.langName = this.$t('langName')
}
}
</script>
5. 语言切换
<template>
<div class="langWrap">
<div class="langInner" @click="handleCh">
中文
</div>
<div class="langInner" @click="handleEn">
英文
</div>
</div>
</template>
<script>
export default {
data () {
return {
langName: '',
}
},
methods: {
handleCh() {
this.$i18n.locale = 'zh-CN'
},
handleEn() {
this.$i18n.locale = 'en-US'
},
}
}
</script>
最后：如果在npm安装 vue-i18n 成功了，但是引用的时候有时候出现报错Cannot read properties of undefined (reading ‘install‘)的问题，可以参考我的另外一篇文章：解决vue项目中使用vue-i18n报错Cannot read properties of undefined (reading ‘install‘)的问题