当前位置: 首页 > Web前端 > JavaScript

vue3.0放置vue-i18n

时间:2023-03-27 01:46:50 JavaScript

项目安装vue-i18n需要安装最新版本的vue-i18nnpminstallvue-i18n@next--save或者使用yarnyarnaddvue-i18n@next--save安装完成后可以看一下包.json文件;看看是不是vue-i18n的最新版本,我安装的是9.1.7。在项目src文件夹新建lang文件夹,新建lang文件夹,在lang文件夹新建三个js文件:zh-CN.jsmodule.exports={header:{text:'learning'}}zh-TW。jsmodule.exports={header:{text:'Learning'}}index.jsimport{createI18n}from'vue-i18n'importzh_CNfrom'./zh-CN'importzh_TWfrom'./zh-TW'//语言libraryconstmessages={'zh-CN':zh_CN,'zh-TW':zh_TW}//默认语言//constlangDefault='zh-CN'constlangDefault='zh-TW'consti18n=createI18n({locale:langDefault,//消息默认显示语言})exportdefaulti18n;//暴露国际化,在main.js中引入mount暴露国际化,在main.js中引入mountmain.jsimporti18nfrom'./lang'import{createApp}from"vue";importAppfrom"./App.vue";constapp=createApp(App);//创建实例app.use(i18n);app.mount("#app");在页面中使用在HTML模板中使用模板:

{{$t('header.text')}}
在js中使用js:this.$t('header.text')vue3.0配置vue-国际化