VUE：在 vue 3.x 中使用 i18n

vue 3.x 已经发布一段时间，相信很多开发者都已经在使用了，如果你在使用过程中有国际化的需求，可以看这篇文章，教你如何在 vue 3.x 中使用 i18n。

1. 安装 vue-i18n

   由于 v8 版本的 vue-i18n 仅支持 vue 2.x，所以这里我们需要安装 v9 或以上的版本，你可以点击 这里 访问官网查看详情。

   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
   

2. 创建语言文件并导出

   安装完成之后，你可以在任何地方创建 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
   

3. 在入口文件引入

   在入口文件引入 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')
   

4. 在模板中使用

   使用方法和 vue 2.x 一样，都是通过 $t 方法获取语言包中的值。

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

   渲染后的结果：

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

   大功告成！