vue项目国际化,基于vue-i18n实现
1,安装vue-i18n。
在命令行输入:npm install vue-i18n 或 cnpm install vue-i18n
2,main.js文件中,配置vue-i18n相关的配置。(红框的部分)
3,找到assets文件夹,新增languages文件夹,新建en.json(英文文件),新建zh.json(中文文件)
4,添加中英文文件相关数据
5,在相应页面添加对应的中英文属性。
使用$t('定义的参数')方法
6,成功
7,刷新页面的时候,会发现,切换的中英文失效了
(1)首先把switchover方法改成以下:
switchover() {
this.$i18n.locale = this.$i18n.locale == "en" ? "zh" : "en";
window.localStorage.i18n = this.$i18n.locale;
// console.log(this.$t('voice'))
},
(2)把main.js文件的注册i18n实例并引入语言文件,文件格式等下解析改成以下:
const i18n = new VueI18n({
locale: window.localStorage.i18n || 'zh',
messages: {
'zh': require('@/assets/languages/zh.json'),
'en': require('@/assets/languages/en.json')
}
})
以上是 vue项目国际化,基于vue-i18n实现 的全部内容, 来源链接: utcz.com/z/375009.html