Vue3项目实现国际化全套方案前言 Vue 进入 3.0 时代后，开发体验进入了极速。无论是基建工具（ vite、vit

前言

Vue 进入 3.0 时代后，开发体验进入了极速。无论是基建工具（ vite、vitest、vitessr 、vueuse），还是其生态下的各种插件（vue-i18n 、vite-ssg、vite-plugin-pages、vite-plugin-vue-layouts、unplugin-auto-import、unplugin-vue-components），以及其他如unocss、windicss、tailwindcss、typescript等包的支持都带来了极佳的开发体验。

工具

pnpm：包管理工具（推荐）
vite：打包工具
vue-i18n：国际化包
unplugin-auto-import：自动引入插件
@intlify/vite-plugin-vue-i18n： vite插件
i18n Ally： VS Code插件

整合

以下内容是基于 vite+TypeScript 项目搭建完成、unplugin-auto-import 集成工作完成的基础上

安装

npm i vue-i18n

npm i -D @intlify/vite-plugin-vue-i18n

VS Code 插件

插件库直接搜索 i18n Ally 关键字安装

引入

配置 vite.config.ts

// vite.config.ts

import VueI18n from '@intlify/vite-plugin-vue-i18n'



export default defineConfig({

  plugins: [

  ...

  AutoImport({

      imports: [

        'vue',

        'vue-router',

        'vue-i18n', // 新增

        '@vueuse/head',

        '@vueuse/core',

      ],

      dts: 'src/typings/auto-imports.d.ts',

    }),

  // 新增

  VueI18n({

    runtimeOnly: true,

    compositionOnly: true,

    include: [resolve(__dirname, 'locales/**')],

  }),

 ]

}）

新建 locales 目录，存放语言配置文件

此时， i18n Ally 插件会检测项目根目录下的 locales 文件夹

对于新集成 vue-i18n 的项目，i18n Ally 插件需要重启一下才能识别到根目录下的 locales 文件夹

新建 src/modules/i18n.ts 文件，自动引入 locales 目录下的语言配置

// src/modules/i18n.ts

import { createI18n } from 'vue-i18n'

import type { UserModule } from '~/types'



// Import i18n resources

// https://vitejs.dev/guide/features.html#glob-import

//

// Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite

const messages = Object.fromEntries(

  Object.entries(

    import.meta.globEager('../../locales/*.y(a)?ml'))

    .map(([key, value]) => {

      const yaml = key.endsWith('.yaml')

      return [key.slice(14, yaml ? -5 : -4), value.default]

    }),

)



export const install: UserModule = ({ app }) => {

  const i18n = createI18n({

    legacy: false,

    locale: 'en',

    messages,

  })



  app.use(i18n)

}

应用

最终效果

可以在开发过程中，直观的看到内容

VS Code 右下角，可以切换当前支持的语言，对应 locales 目录下的文件名