Vue使用 i18n 國際化中英文切換

最近做的vue項目要實現國際化語言，自己琢磨看文檔寫出了一個簡單的不能再簡單的demo，供大家參考!

注：vue-cli項目

1. npm安裝

    npm install vue-i18n --save

2. i18n使用，在項目入口文件 main.js 中引入  

    import VueI18n from 'vue-i18n'；

   在 src 目錄下創建一個 language 的文件夾，裏面建兩個 js

    import en from './language/en'；        // 引入en.js 英文內容

    import cn from './language/cn'；         // 引入cn.js 中文內容

    Vue.use(VueI18n)

    const i18n = new VueI18n({

        locale: 'cn',    // 語言標識        

        messages: {

             'cn' : require('./language/cn');

             'en' : require('./language/en');

            }

        })

    vue實例中引入

    new Vue({

        el: '#app',

        router,

        i18n,

        render: h => h(APP)

    })

3. cn.js 和 en.js 內容

    cn.js

module.exports = {
   navList:{
    solution: 'Solution',
    product: 'Product',
    place:'請輸入搜索內容'
  }
}

    en.js

module.exports = {
   navList:{
    solution: 'Solution',
    product: 'Product',
    place:'Please enter the search content'
  }
}

4. 頁面中使用

    <div class="con">{{ $t('navList.solution') }}</div>

    <div class="box">{{ $t('navList.product') }}</div>

    input框中 placeholder 的寫法  

    <input type="text" :placeholder="$t('navList.place')">

5. 頁面中英文切換（需要寫點擊事件）

    tabCn: function(){

             this.$i18n.locale = 'cn'           

         },

    tabEn: function(){

             this.$i18n.locale = 'en'           

         }

如果大家有更好的方法，歡迎留言討論