标签：vue zh cn locale 升级 vue2 vue3 i18n import

项目从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 locale
import { 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 locale
import { 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>

转载本站文章《vue2升级vue3：vue2 vue-i18n 升级到vue3搭配VueI18n v9》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8835.html

标签：vue,zh,cn,locale,升级,vue2,vue3,i18n,import
来源： https://www.cnblogs.com/zhoulujun/p/16398213.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。