多语言切换vue2+vue-i18n
https://www.cnblogs.com/GoTing/p/16996258.html
环境:vue: 2.6.10,vue-i18n: 8.28.2
安装插件
npm install vue-i18n@8
在package.json中检查
在main.js中引入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
assets/VueI18n/language-en.js中定义对应几种语言的展示内容,每个文件变量名需要一样
module.exports = { langage:{ ch:"CH", en:"EN", fn:"FN" }, login: { title:"Login", message: "Welcome Sign In", } .....几个语言就几个js }
使用
几个切换语言的按钮
<div class="langages"> <span @click="changeLaguageZhEnFn('zh')">{{$t('langage.ch')}}</span> <span @click="changeLaguageZhEnFn('en')">{{$t('langage.en')}}</span> <span @click="changeLaguageZhEnFn('fn')">{{$t('langage.fn')}}</span> </div>
1 2 3 4 |
|
其他的文字展示
<div class="title-container"> <h3 class="title">{{$t("login.title")}}</h3> </div> <input :placeholder="$t(login.username)" maxlength="24">
防止当页面刷新 语言切换成初始状态 需要
localStorage.setItem('lang',"zh");
https://kazupon.github.io/vue-i18n/
vue admin 多语言 | admin-element-vue
搭建antd+vue中简体,中繁体,英文,日语多语言后台管理系统