多语言

安装 vue-i18n@next

npm install vue-i18n@next

scr下创建language文件夹，做为语言管理存储。 language文件夹创建 en， zh-cn, zh-tw 文件夹，下面各创建index.ts和index,json

language文件夹下创建index.ts并导出

import { createI18n } from 'vue-i18n'
import EnLang from './en/index'
import ZhtwLang from './zh-tw/index'
import ZhcnLang from './zh-cn/index'
const i18n = createI18n({
  locale: 'zhcn', // set locale
  messages: {
    zhcn: {
      ...ZhcnLang
    },
    zhtw: {
        ...ZhtwLang
      },
    en: {
      ...EnLang
    },
  },
})

export default i18n

在main.ts里面注册

import i18n from '@/language'
const app = createApp(App)

app.use(createPinia()).use(router).use(ElementPlus).use(i18n).use(components).mount('#app')

在模版中使用

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import { ref } from "vue";
import { useI18n } from 'vue-i18n'
import HelloWorld from 'comps/HelloWorld.vue'
import LogoImg from "@/assets/logo.png";
import {store} from '@/store'

const { locale, t  } = useI18n()
const langge = (lange: string) => {
  console.log(t('index-你好'))
  locale.value = lange;
}
</script>

<template>
  <HeviImg alt="Vue logo" :imgSrc="LogoImg"/>
  <div>{{$t('index-你好')}}</div>
  <div>当前语言：{{locale}}</div>
  <button @click="langge('zhcn')">中文(简体)</button>
  <button @click="langge('zhts')">中文(繁体)</button>
  <button @click="langge('en')">英文</button>
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

vue3 + vite + ts 后台项目（二）

多语言