VUE：在 vue 3.x 中使用 i18n

vue 3.x 已经发布一段时间了，如果你在使用，并且有国际化的需求，希望本文能帮到你。

第一步：安装 vue-i18n

在 vue 中配置国际化，一般使用 vue-i18n。由于目前 v8 版本的 vue-i18n 仅支持 vue 2.x，这里我们需要安装 9 或以上的版本。

NPM：

npm i vue-i18n@next

# or

npm i vue-i18n@9

Yarn：

yarn add vue-i18n@next

PNPM：

pnpm i vue-i18n@next

npm 会自动判断你的 Vue 版本，如果不是 3.0 以上的版本，则会报错：

npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.0" from vue-i18n@9.1.7
npm ERR! node_modules/vue-i18n
npm ERR!   vue-i18n@"9" from the root project

其他方法可以查看官网：https://vue-i18n.intlify.dev/installation.html

第二步：创建 i18n 实例

安装完成之后，就可以创建 i18n 实例了，这里可以根据自己的喜好，在任何地方创建。

为了方便管理，我是在 src/i18n/index.ts 创建。

// src/i18n/index.ts
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'chs', // set locale
  messages: {
    chs: {
      message: {
        hello: '你好世界',
      },
    },
    eng: {
      message: {
        hello: 'hello world',
      },
    },
  },
})

export default i18n

第三步：引入

创建好之后，就可以在入口文件引入了。vue 3.x 的入口文件默认是根目录下的 main.ts 或 main.js。

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

const app = createApp(App)

app.use(i18n).mount('#app')

最后一步：使用

引入之后，就可以使用了。使用方法和 vue 2.x 一样，都是通过 $t 方法获取语言包中的值。

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
  </div>
</template>

渲染后的结果：

<div>
  <p>你好世界</p>
</div>

到这里就大功告成！