使用json文件/js文件都是可以的
博主觉得json引号太多了,而且必须使用双引号,所以这里使用的是js。根据个人习惯选择
1、编写语言配置文件
zh_CN.js
// 作为实例只写了一点
export default {
home: {
menu: {
profile: '个人中心',
changeSkin: '换肤',
signOut: '退出登录'
}
}
}
2、安装vue-i18插件
# 安装 vue-i18
npm install vue-i18n -S-D
3、引入并使用vue-i18插件
这里采用分离配置的方式,即不在main.js中直接配置,新建i18n.js来配置。
【注意】
在使用 json作为语言配置文件的时候可以使用 require()语法引入,也可以使用 import引入,但如果是 js文件,要使用 imoprt引入才会生效
在i18n.js中配置
import Vue from 'vue'
// 引入并使用vue-i18n插件
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 引入语言配置文件
import zh_CN from '@/language/zh_CN'
const i18n = new VueI18n({
locale: 'zh_CN', //设置默认语言
messages: {
zh_CN, //zh_CN: zh_CN的简便写法
}
})
export default i18n // 暴露i18n
4、在main.js中引入i18n并挂载到Vue实例
// 引入的时候双点好像是会失败 ../consig/i18n
import i18n from './config/i18n'
new Vue({
el: '#app',
router,
i18n,
components: { App },
template: '<App/>',
})
5、在需要配置语言的地方使用t函数
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="fa fa-user-circle">{{$t("home.menu.profile")}}</el-dropdown-item>
<el-dropdown-item icon="fa fa-tachometer">{{$t('home.menu.changeSkin')}}</el-dropdown-item>
<el-dropdown-item icon="fa fa-sign-out" divided>{{$t('home.menu.signOut')}}</el-dropdown-item>
</el-dropdown-menu>
6、效果图