目录
一、介绍
二、插件基本思路
三、插件版本适用框架
四、Vue3 中使用
1. 安装插件 vue-i18n
2. 定义和组合语言包
3. 引入插件并创建 i18n 实例
4. 挂载实例对象
main.js 文件中的完整代码：
在组件中使用：
四、动态切换语言
1. 获取浏览器当前使用的语言
2. 按钮切换
国际化是指项目能够根据不同国家的语言进行转换，便于不同国家的用户使用。Vue I18 是 Vue.js 的国际化插件，它可以轻松地将一些本地化功能集成到应用程序中。
为什么插件名称是 i18n 呢？它的全程是 internationalization，插件名取了首字母 i 和尾字母 n，中间一共有 18 个字母，所以组合起来就叫 i18n。哈哈哈哈，起名起的离谱。
1. 定义语言包：需要几种语言展示，就定义几个语言包。
2. 组合语言包对象：创建对象，对语言包进行组合，对象的 key 为语言包引用，值为语言包对象。
3. 创建实例：创建 vue-i18n 类的对象，添加 message 和 locale 属性。
4. 挂载：挂载创建的实例对象。
vue-i18n 作为国际化插件，它主要有两个版本：v8 和 v9。v8 版本适用于 Vue2 框架，v9 版本适用于 Vue3 框架。具体区别可以查看 ，以下内容均在 Vue3 中使用。
1. 安装插件 vue-i18n
2. 定义和组合语言包
先定义常用的两个语言包：
组合语言包对象：
3. 引入插件并创建 i18n 实例
注意：在创建实例时，一定要将 legacy 属性设置为 false，因为 legacy 默认为 true，它支持使用 Vue2 框架中的 Options API，如果要在 Vue3 更好的使用 Composition API 模式，那么就需要将此属性手动设置为 false。
4. 挂载实例对象
main.js 文件中的完整代码：
在组件中使用：
在步骤 2 中定义的语言包是对象形式的，如果你定义的是简单的属性形式，要注意在组件中使用时的形式。
想要切换语言时，修改 locale 属性就可以了。
1. 获取浏览器当前使用的语言
如果一开始想使用浏览器中默认的语言，那么将 locale 属性改成如下即可：
2. 按钮切换
添加按钮切换语言时，Vue2 和 Vue3 的修改方式是不同的，在 Vue2 中使用全局的 this.$i18n.locale 就可以修改，但在 Vue3 中，需要 Hook 进行修改，如下所示：
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/6301.html