煮茶忘放糖的博客

简简单单写点文章

Vue3+TS i18n插件使用与配置

首先安装库:

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全局组件语言的变更。