i18n插件实现多语言支持，本文以中英文为例记录一下配置过程。
1.配置
1 export default { 2 ‘home‘: { 3 ‘route‘: ‘Tour Route‘, 4 ‘report‘: ‘Issue Report‘ 5 } 6 }
zh.js // 配置中文显示的内容
1 export default { 2 ‘home‘: { 3 ‘route‘: ‘游览路线‘, 4 ‘report‘: ‘问题上报‘ 5 } 6 }
1.3配置i18n
i18n.js //这里面配置i18n插件
引入Vue, vue-i18n，导入中英文内容文件zh.js 和en.js
(项目使用了iview组件，所以有iview相关的文件引入)
1 import Vue from ‘vue‘ 2 import I18n from ‘vue-i18n‘ 3 import zh from ‘./zh‘ 4 import en from ‘./en‘ 5 import iviewEn from ‘iview/dist/locale/en-US‘ 6 import iviewZh from ‘iview/dist/locale/zh-CN‘ 7 8 Vue.use(I18n) 9 const messages = { 10 en: Object.assign(en, iviewEn), 11 zh: Object.assign(zh, iviewZh) 12 } 13 14 function getLocal () { 15 let lang = ‘en‘ 16 if (Vue.env && Vue.env.language) { 17 lang = Vue.env.language 18 } 19 return lang 20 } 21 22 const i18n = new I18n({ 23 locale: getLocal(), 24 messages 25 }) 26 27 export default i18n
13 Vue.use(iView, {
14 i18n: (key, value) => i18n.t(key, value)
15 })
）
1 import Vue from ‘vue‘ 2 import App from ‘./App‘ 3 import router from ‘./router‘ 4 import ‘./assets/iconfont/iconfont.css‘ 5 import iView from ‘iview‘ 6 import ‘./assets/css/mapbox-gl-v0.54.0.css‘ 7 import ‘./assets/iview-styles/iview.css‘ 8 import axios from ‘axios‘ 9 import i18n from ‘./lang/i18n‘ 10 11 Vue.config.productionTip = false 12 13 Vue.use(iView, { 14 i18n: (key, value) => i18n.t(key, value) 15 }) 16 17 new Vue({ 18 el: ‘#app‘, 19 router, 20 i18n, 21 components: {App}, 22 template: ‘<App/>‘ 23 })
2.使用：
html中直接使用 $t("home.report") 即可获取zh.js或en.js中home对象的report属性
1 <i-col span="11" > 2 <Button size="large" type="text" custom-icon="iconfont icon-shangbaowenti" @click="report"> 3 {{$t("home.report")}} 4 </Button> 5 </i-col>
js中通过Vue实例的$t获取
1 mounted () { 2 console.info(this.$t("home.report")) 3 }
切换语言时只需要改变$i18n.locale的值即可。
1 switchLanguage () { 2 this.$i18n.locale = ‘zh‘ // ‘en‘ 3 }
使用vue-i18n插件做语言切换比较方便，记录一下，欢迎留言交流~
原文：https://www.cnblogs.com/jyughynj/p/11286852.html