Vue2升级Vue3，如何改写为长尾词？

本文共计757个文字，预计阅读时间需要4分钟。

项目从vue2升级到vue3，同时使用VueI18n，需要进行相应的调整。主要涉及Vue+I18n从v8.x升级到v9或更高版本的变化，其中初始化配置可参考：

项目从vue2升级到vue3，使用VueI18n，需做适配调整。主要关注Vue+I18n从v8.x升级到v9或更高版本的变化。

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

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

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

Vue I18n v8.x:

importVuefrom'vue' importVueI18nfrom'vue-i18n' Vue.use(VueI18n) consti18n=newVueI18n({ //... }) newVue({ i18n, //... })

Vue I18n v9 or later:

import{createApp}from'vue' import{createI18n}from'vue-i18n' consti18n=createI18n({ //... }) constapp=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",

importVuefrom'vue'; importVueI18nfrom'vue-i18n'; importchineseJsonfrom'../lang/zh-cn.json'; importenglishJsonfrom'../lang/en.json'; importdayjsfrom'dayjs'; import'dayjs/locale/zh-cn';//importlocale import{getCookie}from'@/utils'; Vue.use(VueI18n); letcurrentLang=getCookie('blueking_language')||'zhCN'; if(currentLang==='en'){ currentLang='enUS'; dayjs.locale('en'); }else{ currentLang='zhCN'; dayjs.locale('zh-cn'); } consti18n=newVueI18n({ locale:getCookie('blueking_language')||'zh-cn', fallbackLocale:'zh-cn', silentTranslationWarn:true, messages:{ en:{...englishJson}, 'zh-cn':{...chineseJson}, }, }); window.i18n=i18n; exportdefaulti18n;

vue3

"vue-i18n": "^9.1.10",

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

注意：globalInjection 为true

使用注意事项：

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

import{defineComponent}from'vue'; import{Exception}from'bkui-vue'; exportdefaultdefineComponent({ props:{ type:String, msg:String, }, render(){ return( <Exceptionclass='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'; exportdefaultdefineComponent({ setup(){ const{t}=useI18n(); return()=>( <div> <Exceptionclass="exception-wrap-item"type="403"> <span>{t('无业务权限')}</span> <divclass='text-subtitle'>{t('你没有相应业务的访问权限，请前往申请相关业务权限')}</div> <divclass='text-wrap'> <spanclass='text-btn'>{t('请联系管理员添加')}</span> </div> </Exception> </div> ); }, });

具体参看：

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> <scriptsetup> import{useI18n}from'vue-i18n' const{locale}=useI18n() constchangeLang=(lang:string)=>{ locale.value=lang localStorage.setItem('lang',lang)//getCookie('lang',lang) 刷新页面 } </script>

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