vue中使用 vue-i18n 切換中英文

偶爾寫項目的時候頁面中的導航欄會須要實現中英文內容切換，而後本身就參考一些百度文檔寫了下，本身項目中用到了，是能夠實現的。（爲了方便切換顯示內容，我把內容寫成了data數據）

先安裝   

npm install vue-i18n

而後在 main.js 中引入 vue-i18n  

import VueI18n from 'vue-i18n'

 

Vue.use(VueI18n)

Vue.config.productionTip = false

let bus = new Vue()

Vue.prototype.bus = bus

const i18n = new VueI18n({

locale: 'zh',

messages: {

'zh': require('./assets/js/zh'),

'en': require('./assets/js/en')

}

})

new Vue({

el: '#app',

router,

i18n,

components: {

App

},

template: '<App/>'

})

 

//以上紅色文字內容都是須要引用的

而後(在項目下的src目錄下的assets的js下)新建兩個js文件，一個en.js ,一個zh.js  (一個放中文，一個放英文)

//en.js

module.exports = {
  language: {
    name: '英文'
  },
  navbar: {
    jtgk: [
      {
        gsimg: require('../../../static/img/fesco.png'),
        biaoti: 'FESCO',
        wenzi: 'Beijing Foreign Enterprise Human Resources '
        gd: 'MORE'
      },
      {
        gsimg: require('../../../static/img/lhyw.png'),
        biaoti: 'UMP',
        wenzi: 'Hong Kong Chow Tai Fus company,',
        path: '/jtgk?page=1&fesco=1#aboat',
        gd: 'MORE'
      }
    ]
  }
}

//中文
module.exports = {
  language: {
    name: '中文'
  },
  navbar: {
    jtgk: [
      {
        gsimg: require('../../../static/img/fesco.png'),
        biaoti: 'FESCO',
        wenzi: '北京外企人力資源服務有限公司（FESCO）成立於1979年，是開創中國人力資源服務行業的第一家企業，',
        path: '/jtgk?page=1&fesco=0#aboat',
        gd: '查看更多'
      },
      {
        gsimg: require('../../../static/img/lhyw.png'),
        biaoti: '聯合醫務',
        wenzi: ' 香港周大福旗下企業，香港主板上市公司（HK00722）聯合醫務',
        path: '/jtgk?page=1&fesco=1#aboat',
        gd: '查看更多'
      }
    ]
  }
}

而後在含有 '中英文'的頁面中寫一些方法

<template>

    <li @click= " changeLang(), zyqh? zyqh = false: zyqh = true ">

     <span class="rr" :class="{ zyw: zyqh }">中文</span>  //控制文字的顏色
     <span :class="{ zyw : !zyqh }"> | ENGLISH</span>  
  </li>

</template>

 

<script>

 

export default {

  name: '',

  data () {

     return {

        zyqh: true,

  methods: {

     changeLang () {

        let locale = this.$i18n.locale

        locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'

        console.log(locale)

              }

          }

       }

</script>

 

<style lang="scss" scoped>

   .zyw {

       color: #d91a21;

      }

</style>

 頁面中的大部分已經寫完了，而後只須要找到實現中英文內容切換的地方，數據顯示出來便可

     <div class="pic_1">
        <div class="js_img" v-for="(item,i) in $t('navbar.jtgk')" :key="i" @click="$router.push({path: item.path})">   //注意紅色文字部分
           <img :src="item.gsimg" alt="">
           <span class="img_name">{{item.biaoti}}</span>
           <div class="bj_img">
              <img src="../../static/img/zhezhao.png" alt="">
              <div class="text">
              <h4>{{item.biaoti}}</h4>
              <div class="wz">
                <p>{{item.wenzi}}</p>
              </div>
               <p class="gd">
                  <span>{{item.gd}}</span>
                  <span><img src="../../static/img/jtred.png" alt=""></span>
               </p>
            </div>
         </div>
       </div>
    </div>