编辑排版|宋大狮
平台运营|小唐狮
ONE问题描述
2月10号记，久违了大家。
今天要和大家分享的是关于web端国际化多语言的问题。
最近这段时间，时不时的接触国际化的项目，于是想借此机会，把有关vue-i18n多语言相关的内容梳理一下。
问题：用vue-i18n实现多语言切换。举例用主流web端技术vue3，vue2可以此为参考。
TWO问题解决
一、安装
1、npm命令
npminstallvue-i18n@next
2、yarn命令
yarnaddvue-i18n@next
二、配置【重点】
1、创建文件
在目录src下，创建lang文件夹，并新建index.js、和翻译的内容文件
2、编写index.js
import{createApp}from'vue'importAppfrom'../App.vue'import{createI18n}from'vue-i18n'importenfrom'./en'importzhfrom'./zh'constapp=createApp(App)consti18n=createI18n({legacy:false,locale:"zh",//初始化显示中文messages:{en,zh}//这里就是你有几种语言，对象里面就有几个})exportdefaultfunction(app){app.use(i18n)}
3、编写zh.js
constzh={home:{Home:'首页',//语言变量:中文字符},}exportdefaultzh
4、编写en.js
consten={home:{Home:'Home',//语言变量:英语字符},}exportdefaulten
5、编写main.js
importi18nfrom'./lang/index'constapp=createApp(App)app.use(i18n)app.mount('#app')
三：使用
1、template中
<divclass="text">{{$t("home.Home")}}</div>
2、script中
引入：
import{useI18n}from"vue-i18n";const{t}=useI18n();
一般使用：
ElMessage({message:t("home.Home"),type:"success",});
特殊使用：
//多语言不生效时，请借用计算属性constuserTypeList=computed(()=>{construles=[{value:"1",label:t("home.Home"),}];returnrules;});
四：语种切换
<el-buttontype="primary"@click="changeLang('en')">英文</el-button>import{useI18n}from"vue-i18n";const{locale}=useI18n();constchangeLang=(val)=>{locale.value=val;localStorage.setItem("lang",val);｝
-END-
