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

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

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

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

安装

# NPM
npm install -D vue-i18n@9
# Yarn
yarn add -D vue-i18n@9
# PNPM
pnpm add -D 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，来达到网页内切换语言的效果。

<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 的很少功能的案例只是个简简单单的入门。各位可以去他们官方文档查看，有错误的话欢迎大佬在评论区勘正！