1、安装：
npm install vue-i18n
2、在main.js中引用并使用：
import VueI18n from "vue-i18n"
Vue.use( VueI18n)
//引入element-ui语言
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
const messages={
en:{
... require('@/assets/languages/en.json'),
...elementEnLocale
},
cn:{
... require('@/assets/languages/zh.json'),
...elementZhLocale
}
}
const i18n = new VueI18n({
locale: localStorage.getItem("langData") || 'en',//指定默认语言
messages,
})
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
})
new Vue({
el: '#app',
router,
i18n,
stores,
components: {
App
},
template: '<App/>'
})
3.创建语言包文件：
创建语言包文件，在src下建languages文件夹并建en.json和zh.json文件
- en.json文件
{
"common": {
"home": "Home",
"login": "Login",
"register": "Register",
"appDownload": "APP Download",
},
"home": {
"hint1": "Please Input Nickname",
"hint2": "Please Input Username",
"hint3": "Please Input Password",
}
}
- zh.json文件
{
"common": {
"home": "首页",
"login": "登录",
"register": "注册",
"appDownload": "APP 下载",
},
"home": {
"hint1": "请输入昵称",
"hint2": "请输入用户名",
"hint3": "请输入密码",
}
}
4.点击按钮更换语言：
1.通过localStorage设置 localStorage.setItem('lang',langData)在main.js中获取
lang1.png
5. 在template中使用vue-i18n
<p class="text">{{$t("home.overallBalance")}}</p>
<el-form-item :label="$t('home.LimitedInfor')"></el-form-item>
6. 在js中使用vue-i18n
data()
return {
list:[this.$t('home.day'), this.$t('home.month'), this.$t('home.year')]
}
- 有写的不足的地方欢迎吐槽！！！！！！！！！
