Vue I18n 国际化插件，从安装到使用最全篇

一、介绍

二、插件基本思路

三、插件版本适用框架

四、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 中使用。

四、Vue3 中使用

1. 安装插件 vue-i18n

// 使用 npm
npm install vue-i18n@9// 使用 yarn
yarn add vue-i18n@9

2. 定义和组合语言包

先定义常用的两个语言包：

// src/langurage/en.js 
// 定义英文语言包对象
export default {navigateBar: {hotspot: 'Hotspot',experience: 'Experience',focus: 'Focus',recommend: 'Recommend'},tabs: {work: 'Work',private: 'Private',collect: 'Collect',like: 'Like'}
}

// src/langurage/zh.js 
// 定义中文语言包对象
export default {navigateBar: {hotspot: '热点',experience: '经验',focus: '关注',recommend: '推荐'},tabs: {work: '作品',private: '私密',collect: '收藏',like: '喜欢'}
}

组合语言包对象：

// src/main.js
const message = {en,zh
}

3. 引入插件并创建 i18n 实例

// src/main.js
import { createI18n } from 'vue-i18n';const i18n = createI18n({legacy: false,  // 设置为 false，启用 composition API 模式messages,locale: 'en'  // 设置默认语言
})

注意：在创建实例时，一定要将 legacy 属性设置为 false，因为 legacy 默认为 true，它支持使用 Vue2 框架中的 Options API，如果要在 Vue3 更好的使用 Composition API 模式，那么就需要将此属性手动设置为 false。

4. 挂载实例对象

// src/main.js
import { createApp } from 'vue';const app = createApp(App);app.use(i18n);

main.js 文件中的完整代码：

import { createApp } from 'vue';
import App from './App.vue';
import { createI18n } from 'vue-i18n';
import en from './langurage/en';
import zh from './langurage/zh';// 组合语言包对象
const messages = {en,zh
}// 创建实例对象
const i18n = createI18n({legacy: false,  // 设置为 false，启用 composition API 模式messages,locale: 'en'
})// 创建 Vue 实例
const app = createApp(App);// 注册对象
app.use(i18n);// 挂载到 Dom 元素中
app.mount('#app');

在组件中使用：

<template><div><ul><li>{{ $t("navigateBar.hotspot") }}</li><li>{{ $t("navigateBar.experience") }}</li><li>{{ $t("navigateBar.focus") }}</li><li>{{ $t("navigateBar.recommend") }}</li></ul><ol><li>{{ $t("tabs.work") }}</li><li>{{ $t("tabs.private") }}</li><li>{{ $t("tabs.collect") }}</li><li>{{ $t("tabs.like") }}</li></ol><div>
</template>

在步骤 2 中定义的语言包是对象形式的，如果你定义的是简单的属性形式，要注意在组件中使用时的形式。

四、动态切换语言

想要切换语言时，修改 locale 属性就可以了。

1. 获取浏览器当前使用的语言

如果一开始想使用浏览器中默认的语言，那么将 locale 属性改成如下即可：

const i18n = createI18n({messages,locale: navigator.language // 获取浏览器的语言
})

2. 按钮切换

添加按钮切换语言时，Vue2 和 Vue3 的修改方式是不同的，在 Vue2 中使用全局的 this.$i18n.locale 就可以修改，但在 Vue3 中，需要 Hook 进行修改，如下所示：

<template><div><div><button @click="changeLocale('zh')">切换为中文</button><button @click="changeLocale('en')">切换为中文</button></div><ul><li>{{ $t("navigateBar.hotspot") }}</li><li>{{ $t("navigateBar.experience") }}</li><li>{{ $t("navigateBar.focus") }}</li><li>{{ $t("navigateBar.recommend") }}</li></ul><ol><li>{{ $t("tabs.work") }}</li><li>{{ $t("tabs.private") }}</li><li>{{ $t("tabs.collect") }}</li><li>{{ $t("tabs.like") }}</li></ol><div>
</template><script setup>
import { useI18n } from "vue-i18n";const { locale } = useI18n();// 切换语言
const changeLocale = (lang) => {locale.value = lang;
};
</script>