vue+iview+i18n国际化
首先安装i18n 和 js-cookie
npm install vue-i18nnpm install js-cookie --save
第一步:
新建src/language文件夹 和src/language/config,在language下新建文件index.js,在language/config下新建zh.js(中文) en.js(英文) 文件。
image.png
第二步:
index.js文件
import Vue from \'vue/dist/vue.min.js\';import VueI18n from \'vue-i18n/dist/vue-i18n\';import Cookies from \'js-cookie\';import iviewEN from \'iview/dist/locale/en-US\';import iviewZH from \'iview/dist/locale/zh-CN\';// 存储在本地,刷新后不会丢失const language = Cookies.get(\'language\') || \'zh\';Cookies.set( \'language\' , language )Vue.use(VueI18n)const messages = { \'zh\':{ ...require(\'./config/zh.js\'), ...iviewZH }, \'en\':{ ...require(\'./config/en.js\'), ...iviewEN }}const getLanguage = function () { let lang = navigator.browerLanguage?navigator.browerLanguage:navigator.language||navigator.userLanguage lang = lang?lang:\'zh\' if(Cookies.get(\'language\')){ lang = Cookies.get(\'language\') } return lang}const i18n = new VueI18n({ locale:getLanguage(), messages})export default i18n;
en.js 英文翻译文件
module.exports = { navbar: { English: \'English\', Chinese: \'chinese\', Tc: \'traditional Chinese\', homepage: \'home page\', personal: \'personal\', logout: \'logout\', language: \'language\' }}
zh.js 英文翻译文件
module.exports = { //头部 navbar:{ English:\'英文\', Chinese:\'中文\', Tc:\'繁体\', homepage:\'首页\', personal:\'个人中心\', logout:\'退出登录\', language:\'语言\' } }
第三步
在main.js引入,挂载
import VueI18n from \"vue-i18n\"import i18n from \"./language\"Vue.use(VueI18n)//注入到所有的子组件const app = new Vue({ el: \'#app\', router, store, i18n,//挂载 components: { App }, template: \'\'})
第四步 使用
{{lang}} {{$t(\'navbar.Chinese\')}} {{$t(\'navbar.English\')}} {{$t(\'navbar.Tc\')}} export default{ data(){ return{ lang:\'\' } }, methods:{ //语言选择 handleClickDropdown2(name){ if(name === \'ch\'){ this.lang=\"中文\" this.$i18n.locale = \'zh\'//这是在locale里Index.js定义的中文变量 }else if(name === \'en\'){ this.lang=\"English\" this.$i18n.locale = \'en\' }else if(name === \'tw\'){ this.lang=\'繁體\' this.$i18n.locale = \'tw\' } }, }}
第五步 在js中使用
在main.js里给vue对象赋值给一个变量
window.vm=new Vue({ el: \'#app\', router, i18n, store, components: { App }, template: \'\'}).$mount(\'#app\')
在js里使用
{{lang}}export default{ data(){ return{ lang:window.vm.$t(\'navbar.language\')//使用国际化 } }}
最后编辑于:2025-06-15 10:17:27 © 著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务
喜欢的朋友记得点赞、收藏、关注哦!!!