VUE3 +TypeScript + i18n多语言结合使用

VUE3 +TypeScript + i18n多语言结合使用

1、安装i18n

npm install vue-i18n@9

2、配置多语言文件

在src目录下创建lang文件夹，内部创建index.ts【多语言入口文件】 、zh.ts【中文语言配置】、en.ts【英文语言配置】。
结构如下：
｜-src
｜— assets
｜— components
｜— lang
｜— index.ts
｜— zh.ts
｜— en.ts

1. index.ts

import { createI18n } from 'vue-i18n' // 引入i18n创建多语言对象
import zhLocale from './zh'; // 引入中文对应语言配置
import enLocale from './en'; // 引入英文对应语言配置

const messages = {
    zh: zhLocale,
    en: enLocale
}

const localLang = navigator.language.split('-')[0]; // 获取浏览器语言环境
const storageLang = window.localStorage.getItem('locale')?.split('"')[1].split('"')[0].toLocaleLowerCase() || 'en'; // 获取localStorage本地语言环境
const c = (storageLang.toLocaleLowerCase() !== 'zh' && storageLang.toLocaleLowerCase() !== 'en') ? 'en' : storageLang; // 如果localStorage语言环境既不是中文也不是英文就取为英文

const i18n = createI18n({
    globalInjection: true, // 开启全局多语言渗透
    locale: c || localLang || 'en', // 语言环境
    messages, // 语言配置字段
    legacy: false, // // 使用 vue3 组合式API 时必须设置为 false
})

export default i18n

2. zh.ts

export default {
  common: {
    add: "新增",
    edit: "编辑",
    delete: "删除"
  }
}

3. en.ts

export default {
  common: {
    add: "Add",
    edit: "Edit",
    delete: "Delete"
  }
}

其他语种配置同理

3、挂在到VUE上

main.ts

import { createApp } from 'vue
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

import i18n from '@/lang/index' // 多语言引入

const app = createApp(App);

app.use(store).use(router).use(i18n).mount('#app') // 使用i18n
app.config.globalProperties.$t = i18n.global.t // 挂载到全局，DOM上能使用$t使用

4、使用

由于上一步使用了app.config.globalProperties挂载到全局，所有vue页面都可用$t来使用。
比如：

<template>
  <div :style="{ boxShadow: 'var(--el-box-shadow-lighter)' }" id="topBar">
    <span class="vertical-middle">{{ $t('common.label1') }}</span>
  </div>
</template>

但是，在ts中，直接使用是不行的，需要另外引入，setup 有两种写法。

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useI18n } from 'vue-i18n' // 多语言


export default defineComponent({
  name: 'LeftMenu',
  setup() {
    const { t } = useI18n() // t方法取出，t('code')使用
    const menuList = [
      { id: '1', icon: 'Connection', title: t('tenant.label1'), path: '/tenant' }, 
      { id: '2', icon: 'Iphone', title: t('android.label1'), path: '/android' },
      { id: '3', icon: 'Iphone', title: t('androidManage.label1'), path: '/androidManage' },
      { id: '4', icon: 'Iphone', title: t('orderManage.label1'), path: '/orderManage' }
    ]
    return {
      menuList
    }
  },

})

</script>

或者

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import { useI18n } from 'vue-i18n' // 多语言

const { t } = useI18n() // t方法取出，t('code')使用
const menuList = [
  { id: '1', icon: 'Connection', title: t('tenant.label1'), path: '/tenant' }, 
  { id: '2', icon: 'Iphone', title: t('android.label1'), path: '/android' },
  { id: '3', icon: 'Iphone', title: t('androidManage.label1'), path: '/androidManage' },
  { id: '4', icon: 'Iphone', title: t('orderManage.label1'), path: '/orderManage' }
]

</script>