首先安装库：

npm i vue-i18n@next
npm i vue-cli-plugin-i18n@next

vite.config.ts 配置：

import {defineConfig} from "vite"
import vue from "@vitejs/plugin-vue"
import path from 'path'
import {vueI18n} from "@intlify/vite-plugin-vue-i18n"

// https://vitejs.dev/config/
export default defineConfig({
   resolve: {
       alias: {
            'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
       }
    },
    plugins: [
        vue(),
        vueI18n(
            {
                include: path.resolve(__dirname, './src/i18n/locales/**')
            }
        )
// ... 这里是其他配置
]
})

src 目录新增 i18n文件夹，i18n文件夹下新建 index.ts文件和 locales 文件夹

import { createI18n } from 'vue-i18n'
import enUS from './locales/en-US.json'
import zhCN from './locales/zh-CN.json'

type MessageSchema = typeof enUS

const i18n = createI18n<[MessageSchema], 'en-US' | 'zh-CN'>({
    // 默认语言先取自定义的，再取浏览器的，最后默认英文
    locale: localStorage.getItem("locale") || navigator.language || 'en-US',
    legacy: false,
    // allowComposition: true, // 是否允许在 Legacy API 模式下使用 Composition API
    messages: {
        'en-US': enUS,
        'zh-CN': zhCN // 可以追加其他语言
    }
})

export default i18n

locales 文件夹下新建 zh-CN.json、en-US.json

文件内格式要保持一样：

举例：

zh-CN.json

{
    "Home": "首页"
}

en-US.json

{
    "Home": "Home"
}

然后在 main.ts 安装插件：

import i18n from './i18n'
... 
// 国际化管理
app.use(i18n)

接着就能在vue组件中使用了，使用方式是：

<script setup lang="ts">
import i18n from "./i18n"

const setLanguage = (locale: 'zh-CN' | 'en-US') => {
   // @ts-ignore， 这是官方的错误，本身现在它就是一个ComputedRefImpl类型的参数
   if(locale !== i18n.global.locale.value) {
      localStorage.setItem("locale", locale)
      // @ts-ignore
      i18n.global.locale.value  = locale
      // 重新加载页面，组件的类型才能生效
      location.reload()
      return true // 这里加弹窗也可以
   }{
      return false
   }
}
</script>
<template>
   <h1>{{ $t('Home') }}</h1>
 <button @click="setLanguage('zh-CN')">简体中文</button>
</template>

setLanguage方法可以抽离出来放到utils目录中的index里面单独导出，后续作为标准工具。

下一篇文章说说 NaiveUI全局组件语言的变更。