Vue多语言支持

i18n插件实现多语言支持，本文以中英文为例记录一下配置过程。

1.配置

1.1安装：npm install vue-i18n --save

1.2创建中英文配置项文件

src/lang目录下创建以下文件：

 

en.js  // 配置英文显示的内容

 export default {
   'home': {
     'route': 'Tour Route',
     'report': 'Issue Report'
   }
 }

zh.js  // 配置中文显示的内容

 export default {
   'home': {
     'route': '游览路线',
     'report': '问题上报'
   }
 }

1.3配置i18n

i18n.js  //这里面配置i18n插件

引入Vue, vue-i18n，导入中英文内容文件zh.js 和en.js

(项目使用了iview组件，所以有iview相关的文件引入)

 import Vue from 'vue'
 import I18n from 'vue-i18n'
 import zh from './zh'
 import en from './en'
 import iviewEn from 'iview/dist/locale/en-US'
 import iviewZh from 'iview/dist/locale/zh-CN'

 Vue.use(I18n)
 const messages = {
   en: Object.assign(en, iviewEn),
   zh: Object.assign(zh, iviewZh)
 }

 function getLocal () {
   let lang = 'en'
   if (Vue.env && Vue.env.language) {
     lang = Vue.env.language
   }
   return lang
 }

 const i18n = new I18n({
   locale: getLocal(),
   messages
 })

 export default i18n

 

main.js中导入i18n，放入Vue的实例中，这样所有组件都可以使用了。

（  项目使用了iview组件，所以有如下配置

13 Vue.use(iView, {
14   i18n: (key, value) => i18n.t(key, value)
15 })
） 

 import Vue from 'vue'
 import App from './App'
 import router from './router'
 import './assets/iconfont/iconfont.css'
 import iView from 'iview'
 import './assets/css/mapbox-gl-v0.54.0.css'
 import './assets/iview-styles/iview.css'
 import axios from 'axios'
 import i18n from './lang/i18n'

 Vue.config.productionTip = false

 Vue.use(iView, {
   i18n: (key, value) => i18n.t(key, value)
 })

 new Vue({
   el: '#app',
   router,
   i18n,
   components: {App},
   template: '<App/>'
 })

2.使用：

html中直接使用 $t("home.report") 即可获取zh.js或en.js中home对象的report属性

 <i-col span="11" >
      <Button size="large" type="text" custom-icon="iconfont icon-shangbaowenti" @click="report">
                 {{$t("home.report")}}
       </Button>
 </i-col>

js中通过Vue实例的$t获取

 mounted () {
     console.info(this.$t("home.report"))
   }

切换语言时只需要改变$i18n.locale的值即可。

 switchLanguage () {
     this.$i18n.locale = 'zh'  // 'en'
 }

使用vue-i18n插件做语言切换比较方便，记录一下，欢迎留言交流~