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

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

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

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

顺带一提，i18n是单词internationalization（n. 国际化）的缩写（靠北但是真的好怪哦）

安装

# 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，来达到网页内切换语言的效果。

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