vue-i18n 切換中英文

1.首先使用npm安裝vue-i18n

安裝命令：

npm install vue-i18n

 2.在src/renderer目錄(我的項目是如此)下創建如下目錄和文件：

a):創建目錄 src/renderer/i18n

b):創建目錄src/renderer/i18n/langs

c):在src/renderer/i18n目錄下新建文件i18n.js，內容如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale';
import zh from './langs/zh'
import en from './langs/en'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'


Vue.use(VueI18n)

const messages = {
  en: Object.assign(en, enLocale),
  zh: Object.assign(zh, zhLocale)
}

console.log(messages.zh)

const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'zh',//zh表示此處默認爲中文，改爲en則默認爲英文
  messages
})


locale.i18n((key, value) => i18n.t(key, value)) //爲了實現element插件的多語言切換

export default i18n

d):在src/renderer/i18n/langs下創建文件zh.js和en.js

zh.js內容如下：

// 注意：一定是 exports，不是 export，否則會報錯，報錯信息是下列的中的內容不是 string
module.exports = {
    login:{
        login:'登錄',
        loginsave:'是否保存登錄賬號及密碼'
    },
    logout:{
        logout:'退出登錄',
        logoutcomfirm:'是否確定退出登錄',
        logoutclose:'是否確定關閉客戶端'
    }
}

en.js內容如下：

module.exports = {
    login: {
        login: 'Login',
        loginsave: 'To save login account and password'
    },
    logout: {
        logout: 'Logout',
        logoutcomfirm: 'Are you sure to log out ?',
        logoutclose: 'Are you sure to close the client ?'
    }
}

3.在 main.js 中引入 vue-i18n （不過先引入 vue）：

import Vue from 'vue';
// import axios from 'axios';
import App from './App';
import i18n from './i18n/i18n';

4.需要把 i18n 掛載到 vue 根實例上：

new Vue({
  template: '<App/>',
  i18n,
  components: { App },
  store,
  router
}).$mount('#app')

接下來就是怎麼使用了：

5.在html模板中使用：

<div id="app">
    <h1 style="font-size: 16px; text-align: center;">{{ $t("login.loginsave") }}</h1>
</div>

6.在js代碼裏使用：

this.$message({
            message: i18n.t("login.logoutcomfirm"),
            customClass: "main-message",
            type: "success"
          });

7.界面中英文切換按鈕(文字按鈕或者旗幟按鈕)：

      <div class="lang">
        <el-button @click.native="toggleLang()" type="success" round size="small">English | 中 文</el-button>
        <!-- <country-flag country="us" size="small" @click.native="toggleLang()" />
        <country-flag country="cn" size="small" @click.native="toggleLang()" /> 旗幟切換語言-->
      </div>


toggleLang()的實現放在methods中

    toggleLang() {
      let lang = localStorage.getItem("locale");
      console.log(lang)
      if (lang == "zh") {
        localStorage.setItem("locale", "en");
        this.$i18n.locale = localStorage.getItem("locale");
        this.$message({
          message: "Switch to English!",
          type: "success"
        });
      } else{
        localStorage.setItem("locale", "zh");
        this.$i18n.locale = localStorage.getItem("locale");
        this.$message({
          message: "切換爲中文！",
          type: "success"
        });
      }
    }
  },