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')//使用国际化}}
}