npm

这个地方要注意自己的vue版本和i1n8的匹配程度如果是vue2点几记得安装i18n的8版本不然会自动安装的最新版本后面会报错哦查询了下资料好像最新版本是适配的vue3。

npm

在src下面新建i18n文件夹然后在里面新建index.js里面的内容如下

import

./config/en;//element-ui自带多语言配置

import

element-ui/lib/locale/lang/zh-CN;

import

element-ui/lib/locale/lang/en;const

messages

添加多语言每一个语言标示对应一个语言文件messages:messages,

vue

新建i18n文件夹里面新建config文件夹然后在里面新建en.js和zh.js

en.js代码

placeholder请选择el-optionv-foritem

languageOptions:keyitem.value:labelitem.label:valueitem.value/el-option/el-select

/div

{languageValue:,languageOptions:[],}},created()

{//最开始请求的时候看缓存是什么状态if(this.$i18n.localezh){this.languageValue中文简体;this.languageOptions[{value:en,label:English}]}else{this.languageValueEnglish;this.languageOptions[{value:zh,label:中文简体}]}},methods:

{//

多语言切换changeLanguage(type){console.log(type);//

此处做了语言选择记录存在localStorage中这里的作用只有一个当我重新请求页面//的时候先取localStorage的记录值localStorage.setItem(locale,type)this.$i18n.locale

type;

修改页面需要显示的语言if(this.$i18n.localezh){this.languageValue中文简体;this.languageOptions[{value:en,label:English}]}else{this.languageValueEnglish;this.languageOptions[{value:zh,label:中文简体}]}},}

在template中直接使用

this.$t(login.title),六、在单独的js文件中使用

//导入

$t(login.title),七、如果需要在js文件中获取当前保存的状态也就是this.$i18n.locale

import

这里面基本都是我使用的时候遇到问题单独去查的资料但是都写得比较分散比如我遇到了最开始的安装问题或者遇到了在js里面使用的问题又需要去单独的查资料说怎么使用的问题所以想着说把自己遇到的问题都写成一个合集希望能帮助到更多跟我一样的小伙伴最后如果有帮到您记得留言或点赞哦会觉得很开心觉得自己帮助到了人~~