当前位置: 首页 > Web前端 > vue.js

vue中英转换使用vue-i18n

时间:2023-04-01 11:49:24 vue.js

1.安装npminstallvue-i18n2.使用src下创建lang文件夹。1.准备语言包本例中我准备了中文和英文两个语言包:zn和en。在lang下创建两个文件,zn.js和en.js。//zn.jsexportdefault{main:{message:"message",display:"display"}};//en.jsexportdefault{main:{message:"message",display:"display"}}2.准备工作翻译的语言环境是在lang下创建index.js,使用上面两个语言包importVuefrom"vue";importVueI18nfrom'vue-i18n'importznfrom"./zn"importenfrom"./en"Vue.use(VueI18n);//全局注册国际化包//需要翻译的Locale信息consti18n=newVueI18n({locale:"zn",//初始化中文消息:{"zn":zn,"en":en}});exportdefaulti18n3,实现语言翻译在main.js中将i18n注入vueimporti18nfrom'./lang'newVue({el:'#app',router,store,i18n,//注入,不能缺少components:{app},template:''})用法(1)直接使用(2)语言切换三、集成ElementUI语言包我们可以集成ElementUI现有语言包1.扩展中文//zn.jsimportzhLocalefrom'element-ui/lib/locale/lang/zh-CN'//引入元素语言包exportdefault{main:{message:"message",display:"display"},...zhLocale};2.ExtendedEnglish//en.jsimportenLocalefrom'element-ui/lib/locale/lang/en'//引入元素语言包exportdefault{main:{message:"message",display:"display"},...enLocale}根据上图取可翻译字段(语言包)

{{$t('el.colorpicker.confirm')}}

//中文“confirm”,英文“OK”4.问题记录错误的原因主要是当前使用的版本不匹配,解决方法如下。npminstallvue-i18n@8"""vue-i18n使用方案梳理,可供参考