vue+iview+i18n国际化
首先安装i18n 和 js-cookie
npm install vue-i18n
npm 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.userLanguagelang = 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: '<App/>'
})
第四步 使用
<Dropdown trigger="click" @on-click="handleClickDropdown2"><a href="javascript:void(0)" style="color:#ffffff"><div class="demo-avatar">{{lang}}</div></a><DropdownMenu slot="list"><DropdownItem name="ch">{{$t('navbar.Chinese')}}</DropdownItem><DropdownItem name="en">{{$t('navbar.English')}}</DropdownItem><DropdownItem name="tw">{{$t('navbar.Tc')}}</DropdownItem></DropdownMenu></Dropdown>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: '<App/>'
}).$mount('#app')
在js里使用
<div class="demo-avatar">{{lang}}</div>export default{data(){return{lang:window.vm.$t('navbar.language')//使用国际化}}
}
© 著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务
喜欢的朋友记得点赞、收藏、关注哦！！！