vue2 升级 vue3：vue2 vue-i18n 升级到 vue3 搭配 VueI18n v9

2022 年 6 月 21 日
本文字数：2198 字
阅读完需：约 7 分钟

项目从 vue2 升级 vue3，VueI18n 需要做适当的调整。主要是 Vue I18n v8.x 到 Vue I18n v9 or later 的变化，其中初始化：

具体可以参看：https://vue-i18n.intlify.dev/guide/migration/breaking.html

Vue I18n v8.x:

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  // ...
})

new Vue({
  i18n,
  // ...
})

Vue I18n v9 or later:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  // ...
})

const app = createApp({
  // ...
})
app.use(i18n)

Reason: Vue 3 Global API changes, and Vue 3 API architecture changes related for component instances.

bkui-cli 创建的 vue2 项目（magicBox 组件库升级

vue2

"vue-i18n": "^8.26.8",

import Vue from 'vue';import VueI18n from 'vue-i18n';import chineseJson from '../lang/zh-cn.json';import englishJson from '../lang/en.json';import dayjs from 'dayjs';import 'dayjs/locale/zh-cn'; // import localeimport { getCookie } from '@/utils';Vue.use(VueI18n);let currentLang = getCookie('blueking_language') || 'zhCN';if (currentLang === 'en') {  currentLang = 'enUS';  dayjs.locale('en');} else {  currentLang = 'zhCN';  dayjs.locale('zh-cn');}const i18n = new VueI18n({  locale: getCookie('blueking_language') || 'zh-cn',  fallbackLocale: 'zh-cn',  silentTranslationWarn: true,  messages: {    en: { ...englishJson },    'zh-cn': { ...chineseJson },  },});window.i18n = i18n;export default i18n;

复制代码

vue3

"vue-i18n": "^9.1.10",

import { createI18n } from 'vue-i18n';import dayjs from 'dayjs';import 'dayjs/locale/zh-cn'; // import localeimport { getCookie } from '@/utils/utils';import chineseJson from '../lang/zh-cn.json';import englishJson from '../lang/en.json';let currentLang = getCookie('blueking_language') || 'zhCN';if (currentLang === 'en') {  currentLang = 'enUS';  dayjs.locale('en');} else {  currentLang = 'zhCN';  dayjs.locale('zh-cn');}const i18n = createI18n({  locale: getCookie('blueking_language') || 'zh-cn',  fallbackLocale: 'zh-cn',// 设置备用语言  silentTranslationWarn: true,  globalInjection: true,  messages: {    en: { ...englishJson },    'zh-cn': { ...chineseJson },  },});// window.i18n = i18n;export default i18n;

复制代码

注意：globalInjection 为 true

使用注意事项：

在 vue 模板()中与 defineComponent render 函数中直接使用 this.$t 是没有任何问题的。

import { defineComponent } from 'vue';import { Exception } from 'bkui-vue';
export default defineComponent({  props: {    type: String,    msg: String,  },  render() {    return (            <Exception class='exception-wrap-item' type={this.type}>                <span>{this.$t('国际化示例')}</span>            </Exception>    );  },});

复制代码

但是在 step 函数中，需要

import { defineComponent } from 'vue';import { Exception } from 'bkui-vue';import { useI18n } from 'vue-i18n';export default defineComponent({  setup() {    const { t } = useI18n();    return () => (     <div>       <Exception  class="exception-wrap-item" type="403">           <span>{t('无业务权限')}</span>           <div class='text-subtitle'>{t('你没有相应业务的访问权限，请前往申请相关业务权限')}</div>           <div class='text-wrap'>               <span class='text-btn'>{t('请联系管理员添加')}</span>           </div>       </Exception>     </div>    );  },});

复制代码

具体参看：

https://vue-i18n.intlify.dev/guide/advanced/typescript.html#resource-keys-completion-supporting

切换语言

这个和 vue2 一样的

<template>    <div>        <div @click="changeLang('en')">English</div>        <div @click="changeLang('zh')">中文</div>    </div></template><script setup>import { useI18n } from 'vue-i18n'const { locale } = useI18n()
const changeLang = (lang: string) => {  locale.value = lang  localStorage.setItem('lang', lang)// getCookie('lang',lang)  刷新页面}</script>