vue 项目的国际化处理

 

 

1.下载国际化依赖的包：npm install vue-i18n

2.main.js文件引入国际化文件：

import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通过插件的形式挂载

const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
          'zh-CN': require('./language/zh'),   // 中文语言包
          'en-US': require('./language/en'),    // 英文语言包
          'ja-japan': require('./language/japanese'),    // 日语语言包
          'ko-korean': require('./language/korean')    // 韩语语言包
    }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,  // 不要忘记
  store,
  router,
  template: '<App/>',
  components: { App }
})

 

3.创建国际化文件，如图：

export const lang = {
  app:{
    toplang:'语言',
    complaint:'游客投诉',
    help:'帮助中心',
    tel:'服务电话',
    link:'友情链接',
    copy:'Copyright©版权所有',
  },
}

 

4.切换语言：

html:

在页面中的显示：$t('lang.app.toplang')

       <div class="lang">
            <div class="top-language">
              <div class="lang-text">{{$t('lang.app.toplang')}}：</div>
              <div v-for="it in languageImg" @click="changeLangEvent(it.lang)" class="lang-img">
                <img :src="it.img" alt="" class="imgs">
              </div>
            </div>
          </div>

 数据源声明：

       languageImg: [
          {img: '../static/img/all/en.png', lang: 'en-US'},
          {img: '../static/img/all/ja.png', lang: 'ja-japan'},
          {img: '../static/img/all/ke.png', lang: 'ko-korean'},
          {img: '../static/img/all/ch.png', lang: 'zh-CN'},
        ],

 切换不同的国家化语言

     //切换语言
      changeLangEvent(lang) {
        this.$i18n.locale = lang;//关键语句
      },