vue-cli使用i18n插件

1. 安装

npm install vue-i18n

2.创建语言包

在/assets/lg/ 目录下,新建zh.js作为中文语言包,新建en.js作为英文语言包,其中内容为

export const m={
    "webName": "展会系统",
    "home": "系统首页",
    "setUp": "个人设置",
    "changePassword": "修改密码",
    "Logout": "退出登录",
    "eventManagement": "展会管理"
}

当然,英文里面对应的翻译成英文就好了

3. main.js中 引入,并使用

import VueI18n from 'vue-i18n';
Vue.use(VueI18n)

const i18n = new VueI18n({
	locale: "zh", // 定义默认语言为中文
	messages: {
		zh: require("./assets/lg/zh"), //语言包所在的文件位置
		en: require("./assets/lg/en")
	}
});

4.挂载到vue

new Vue({
	i18n,//注意此处
	router,
	render: h => h(App)
}).$mount('#app')

5.使用

在任何需要使用的地方

$t('m.home')  //m是语言包中export 导出的,自己喜欢用什么都行,但是要对应语言包中

例如

<div>{{$t('m.home')}}</div> //在标签内
<div :data-src="$t('m.home')">//在属性中(for v-if等里面都是一样的)
//下面是在vue方法中使用
console.log(this.$t('m.home'));//将会打印出对应的字符串

6.切换语言

this.$i18n.locale='zh';//换中文
 this.$i18n.locale='en';//换英文