Vue 3, TypeScript (TS), 和 Vite 是目前前端开发中常用的技术。要在这样的环境下配置多语言,可以使用 vue-i18n
这个库来实现。以下是一个基本的配置步骤:
1. 安装 `vue-i18n`:
npm install vue-i18n@next
- 在
src
目录下创建一个新的locales
文件夹,并在其中创建你需要的语言文件,例如en.jons
,zh.json
lang.ts
:
zh.json
{
"tabBar":{
"home":"首页",
"more":"更多",
"me":"个人中心"
}
}
en.json
{
"tabBar":{
"home":"Home",
"more":"More",
"me":"Me"
}
}
lang.ts
import { createI18n } from 'vue-i18n';
import en from './en.json'
import zh from './zh.json'
const messages ={
en:{ ...en },
zh:{...zh}
}
export default createI18n({
locale:'en',messages
})
`
main.ts
```js
import i18n from './i18n/lang'
const app =createApp(App)
app.use(i18n)
效果图
如果需要做语言切换
i18n.global.locale = 'zh'
将 i18n.global.locale 设置为你需要切换得语言就ok了