vue3+ts + vite 多语言配置

341 阅读1分钟

Vue 3, TypeScript (TS), 和 Vite 是目前前端开发中常用的技术。要在这样的环境下配置多语言,可以使用 vue-i18n 这个库来实现。以下是一个基本的配置步骤:

1.  安装 `vue-i18n`:
npm install vue-i18n@next

  1. 在 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)

效果图

image.png

如果需要做语言切换

   i18n.global.locale = 'zh'
将  i18n.global.locale  设置为你需要切换得语言就ok了

image.png

image.png