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插件做語言切換比較方便，記錄一下，歡迎留言交流~