当我们在创建网页时，大多数时候其中的内容都是写死了固定了的。

比如下面这个 Vite 默认创建的 Hello world 实例，其内容也就是干巴巴的 Hello, World，除非修改代码，否则没法修改显示的内容，这对外国网友来说并不是很友好。

那么，我们有没有一种解决方案，来显示对应的语言呢？

当然有！那就是我们即将介绍的 Vue I18n。不过在开始之前，如果你有闲情逸致（毕竟 V9 文档还没有中文翻译）的话，我建议你看看它的官方文档。

安装

npm install vue-i18n@9

配置

首先，我们需要创建一个存放各语言的文件，就叫做 locales.json 吧！

// src/locales.json

{

    "zh": {
        "msg": "你好，世界！"
    },
    "en": {
        "msg": "Hello, World!"
    },
    "ja": {
        "msg": "こんにちは、世界!"
    }
}

和其他 Vue 的组件库一样，我们需要在 main.js 中引入

// src/main.js

import { createI18n } from 'vue-i18n'   // 引入 Vue I18n 库
import data from "./locales.json"       // 引入多语言的数据

然后进行在 main.js 中对其进行配置。

const i18n = createI18n({   // 创建 i18n 对象
    locale: "ja",   // 设置默认语言，依据 locales.json 中设定的语言而定
    messages: data  // 设置引入的 data 为多语言数据，进行绑定
})

接下来，我们把 Vue I18n 弄↓进我们的 App 里边。

const app = createApp(App)
app.use(i18n) // 在 App 中注册 i18n
app.mount('#app')

至此，Vue I18n 已经配置完成！我们只需要在组件的 <template> 中调用它就是了！

使用

我们将原来 <h1> 标签里写死的「Hello, World! 」换成 $t('语言对应的名称') 即可。由于我们在 locales.json 中使用的是 msg，所以直接 $t('msg') 就好了！

现在我们尝试，通过更改前文提到的 Vue I18n 配置时的 locale 值，来实现不同语言的切换！

语言切换

由于每次语言切换都要通过更改 locale 的值来操作，不是很方便。我们则可以使用 Vue I18n 为我们提供的一个 v-model，来达到网页内切换语言的效果。

<!-- App.vue -->

<template>
    <h1>{{ $t('msg') }}</h1>

    <select v-model="$i18n.locale">
        <option>zh</option>
        <option>en</option>
        <option>ja</option>
    </select>

</template>

我们将 locales.json 中的语言一一对应地搬过来，然后就能在页面内通过选择不同的选项，来设定不同的语言了！

最后

Vue I18n 实际上能做的，比提供不同类型的语言多得多，而且像这样传统地使用 Vue I18n 的案例其实并不是很多。各位可以去他们官方文档查看，有错误的话欢迎大佬在评论区勘正！