vue中多语言切换

下载 vue-i18n

npm i vue-i18n


在assets 中创建lang 文件夹
在lang 文件夹中 zh.js 和 en.js
zh.js

export const main = {white: &＃39;亮丽&＃39;,black: "深沉",add: "添加",del: "删除",delALL: "全部删除",edit: "编辑",cancel: "取消",select: "选用",check: "查看",operate: "操作",
}


en.js

export const main = {white: &＃39;white&＃39;, //亮丽black: "black", //黑色add: "add", //添加del: "del", //删除delALL: "del All", //全部删除edit: "edit ", //编辑cancel: "cancel", //取消select: "select", //选用check: "check", //查看operate: "operate", //操作
}


下载 main.js文件中添加

import vueI18n from &＃39;vue-i18n&＃39;
Vue.use(vueI18n)
const locale=localStorage.grtItem(&＃39;lang&＃39;)
const i18n=new vueI18n({locale:locale||&＃39;zh&＃39;messages:{&＃39;zh&＃39;:require(&＃39;@/assets/lang/zh&＃39;),&＃39;en&＃39;:require(&＃39;@/assets/lang/en&＃39;),}
})
在最后
new Vue({router,store,i18n,//添加这一行render:h=>h(App)
}).$mount(&＃39;#app&＃39;)


在页面适当位置添加切换操作

语言中文英文

事件
language（val）{this.$ii8n.locale=vallocalStorage.setItem("lang",val)
}


使用:在需要切换语言的粘贴如下代码

{{$t(&＃39;main.add&＃39;)}}//add 是zh.js和en.js 定义的 key 项