使用 vue-i18n 切换中英文效果

vue-i18n 仓库地址：

兼容性：

支持 Vue.js 2.x 以上版本

安装方法：（此处只演示 npm）

使用方法：

1、在 main.js 中引入 vue-i18n （前提是要先引入 vue）

2、准备本地的翻译信息

3、创建带有选项的 VueI18n 实例

4、把 i18n 挂载到 vue 根实例上

5、在 HTML 模板中使用

查看运行效果：

我们刚才选定的语言标识是 “en” 英语，现在改成 “zh” 中文，并查看效果

这样就可以轻松实现国际化了，实际开发中，页面内容肯定是很多的，我们可以把对应语言的信息保存为不同的 json对象

zh.js

en.js

接下来，在HTML 模板中使用，要特别注意在 js 中的国际化写法

查看编译效果：

现在换成英文的：

在上面的操作中，我们都是通过手动修改 locale 的属性值来切换语言，实际上，更希望浏览器自动识别，这里可以借助于 cookie

1、新建一个 cookie.js 文件，用于读取cookie

2、在 main.js 中引入这个js，并通过 PLAY_LANG 属性来获取浏览器的语言

这里需要注意两个极易出错的地方：

（1）、将 $t() 写成了 $()

（2）、json 中在同一个对象里有同名属性

vue-i18n 提供了一个全局配置参数叫 “locale”，通过改变 locale 的值可以实现不同语种的切换

下面的案例借用了 Element UI 的弹窗样式，上面的步骤不再赘述，直接上核心代码

效果：

总结

以上所述是小编给大家介绍的使用 vue-i18n 切换中英文效果。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!