vue項目實現中英文切換

這是我個人之前做項目的一點記錄，如果有問題歡迎大家指正。

1、首先npm進行安裝 ： npm install vue-i18n

2、安裝完成之后的main.js中配置  

       import VueI18n from 'vue-i18n'

  Vue.use(VueI18n)

3、在assets文件下我創建了lang文件夾 里面包含zh.js  en.js  (這兩個為中英文翻譯)；
之后在main.js中引入中英文翻譯  如下：

const i18n = new VueI18n(
  {
    locale: window.localStorage.getItem('language') == null ? "zh" : window.localStorage.getItem('language'),    // 語言標識
    messages: {
      'zh': require('./assets/lang/zh'),
      'en': require('./assets/lang/en')
    }
  }
)

擴展：zh.js  如下     

module.exports ={

    home: {h1: '首頁', h2: '標題1', h3: '標題2', h4: '標題3', h5: '標題4'},   //頁面1

    home1: {h1: '首頁', h2: '標題1', h3: '標題2', h4: '標題3', h5: '標題4'},   //頁面2

}

en.js和zh.js 內容和字段必須一一對應 

使用時：<p>{{$t("header.h1")}}</p>   input使用時為  $t('home.h1')