前言

在之前的大數(shù)據(jù)可視化項(xiàng)目和最近的后臺(tái)管理項(xiàng)目，都用到了國(guó)際化，所以在這里記錄下來(lái)，以方便后續(xù)的維護(hù)使用分冈。

Step 一 安裝i18n

npm install vue-i18n --save-dev

Step 二 將i18n引入vue實(shí)例 在main.js中配置

import vueI18n from 'vue-i18n'

Vue.use(vueI18n);

const i18n = new vueI18n({
    locale: window.sessionStorage.getItem('lang') || 'zh-CN', // 語(yǔ)言標(biāo)識(shí)
    //this.$i18n.locale // 通過(guò)切換locale的值來(lái)實(shí)現(xiàn)語(yǔ)言切換
    messages: {
        'zh-CN': require('./components/utils/zh'), // 中文語(yǔ)言包
        'en-US': require('./components/utils/en') // 英文語(yǔ)言包
    }
});
    new Vue({
        el: '#app',
        router,
        i18n,   //掛在實(shí)例，
        store,
        // axios,
        components: {
            App
        },
        template: '<App/>',
        methods: {

        }
    })

如果你是按需加載的element-ui請(qǐng)看下邊的配置渣叛，這樣的話可以做到element-ui的國(guó)際化丈秩，如果你是全部加載
那么直接看官網(wǎng)的解說(shuō)
下邊的都是在main.js里邊配置 其他的配置同上

import lang_en from 'element-ui/lib/locale/lang/en'
import lang_zh from 'element-ui/lib/locale/lang/zh-CN' 
import el_locale from 'element-ui/lib/locale'
const messages = {
    'en-US': {
      ...require('./components/utils/en'),
      ...lang_en
    },
    'zh-CN': {
      ...require('./components/utils/zh'),
      ...lang_zh
    }
  }


  const i18n = new vueI18n({
    locale: window.sessionStorage.getItem('lang') || 'zh-CN', // 語(yǔ)言標(biāo)識(shí)
    messages,
});
el_locale.i18n((key, value) => i18n.t(key, value))

Step 三 新建兩個(gè)js文件，一個(gè)存放中文的淳衙，一個(gè)存放英文的。

untils.png

zh.js

export const language = {
    // 頭部導(dǎo)航欄
    headerNav: {
        PlatformOperation: "平臺(tái)運(yùn)營(yíng)后臺(tái)", //Platform operation background
    },
    // 登錄
    login: {
        logout: '退出', //logout
        Lanugages: '中英文切換', //Lanugages
        platformSystem: '平臺(tái)運(yùn)營(yíng)管理系統(tǒng)', //Platform operation management system
        greeting: 'BUYDO讓買(mǎi)的更便宜,賣(mài)的更貴！', //BUYDO makes people buy cheaper and sell more expensive!
       }
}

en.js

export const language = {
    headerNav: {
        PlatformOperation: 'Buydo Management System'
    },
    // 登錄
    login: {
        logout: 'Logout',
        Lanugages: 'Language',
        chinese: 'Chinese',
        english: 'English',
        platformSystem: 'Buydo Management System',
       }
}

Step 四 在你需要的地方觸發(fā)切換local的值

      <el-dropdown @command="handleLang" trigger="click">
          <span class="el-dropdown-link">
            {{$t('language.login.Lanugages')}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="chinese">{{$t('language.login.chinese')}}</el-dropdown-item>
            <el-dropdown-item command="english">{{$t('language.login.english')}}</el-dropdown-item>
            <!-- <el-dropdown-item command="english">日語(yǔ)</el-dropdown-item> -->
          </el-dropdown-menu>
        </el-dropdown>
  methods: {
    //切換語(yǔ)言
    handleLang(command) {
      if (command == "chinese") {
        this.$i18n.locale = "zh-CN";
        this.$elementMessage("中文");
      }
      if (command == "english") {
        this.$i18n.locale = "en-US";
        this.$elementMessage("英文");
      }
      window.sessionStorage.setItem("lang", this.$i18n.locale);
      this.getLevel();   //這是調(diào)用切換語(yǔ)言的接口箫攀，因?yàn)楹笈_(tái)也需要國(guó)際化
    },
}

Step 五 vue - i18n 數(shù)據(jù)渲染的模板語(yǔ)法

//組件內(nèi)的模板
     <div class="content">
          {{$t('language.login.platformSystem')}}
        </div>


// 動(dòng)態(tài)綁定在vue
          <el-input  :placeholder="$t('language.system.enterClassName')"
                    v-model="productCategoryAddReqVo.name" ></el-input>



//在vue.js data 中賦值

<script>
export default {
  name: "App",
  data() {
    return {
      isRouterAlive: this.$t('language.system.enterClassName')
    };
  },

};
</script>

結(jié)束語(yǔ)

到此項(xiàng)目的國(guó)際化就告一段落了肠牲。在這里記錄一下，方便后續(xù)使用以及學(xué)習(xí)靴跛。