element-ui國際化探索（大型項目適用）

配置好了，本身感受是比較簡單的，就是有一點點繁瑣，加油吧。

因爲保密，沒法拿出項目，故寫了一個小demo,記錄一下,適用於大型項目：

項目中須要自定義切換中/英文（國際化），基於vue.js，結合vue-i18n，ElementUI,如下是使用方法。

ElementUI國際化連接： http://element-cn.eleme.io/#/...
vue-i18n：https://github.com/kazupon/vu...
安裝: npm install vue-i18n

目錄結構以下圖：

//i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)
//從localStorage中拿到用戶的語言選擇，若是沒有，那默認中文。
const i18n = new VueI18n({
    locale: localStorage.lang || 'cn',
    messages,
})

export default i18n

 

//langs/index.js

import en from './en';
import cn from './cn';
export default {
    en: en,
    cn: cn
}

//en.js
const en = {
    message: {
        'hello': 'hello, world',
    }
}

export default en;

 

//cn.js
const cn = {
    message: {
        'hello': '你好，世界',
    }
}

export default cn;

//main.js添加下面代碼
import i18n from './i18n/i18n';
window.app = new Vue({
  el: '#app',
  router,
  store,
  i18n,
  template: '<App/>',
  components: { App }
})

接下來是在頁面中使用、切換語言。

//html: 
<p>{{$t('message.hello')}}</p> // hello, world

//js切換語言
data() {
    return {
        lang: 'en'
    }
},
methods: {
    switchLang()  {
        this.$i18n.locale = this.lang 
    }
}

vue.js+vue-i18n+elementUI國際化

更改的地方很少，以下

//i18n.js

import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
import messages from './langs'
Vue.use(VueI18n)
//從localStorage中拿到用戶的語言選擇，若是沒有，那默認中文。
const i18n = new VueI18n({
    locale: localStorage.lang || 'cn',
    messages,
})
locale.i18n((key, value) => i18n.t(key, value)) //爲了實現element插件的多語言切換

export default i18n

　　

$t()綁定方式

舉慄：

一：<p>{{$t('message.hello')}}</p>

二：:label="$t('cr.productCMO')"

三：:rules="[{ required: true, message:$t('cr.textbox'), trigger: 'blur' }]"

四：Hae.alert(this.$t('cr.pushFailed'))

五：<h5>{{$t('cr.twarehouse')}}</h5>

六：<el-select v-model="value8" clearable @change="handleSelect" :placeholder="$t('cr.selectVersion')">

v-text、v-html中： <p v-text="$t('message.hello')"></p>
data中: label: this.$t('message.hello')

  <el-form-item :label="$t('cr.productCMO')" prop="SignUser.ProductCMO" :rules="[{ required: true, message:$t('cr.textbox'), trigger: 'blur' }]">
                <el-autocomplete popper-class="my-autocomplete" v-model="versionReleaseInfo.ParaData.SignUser.ProductCMO" :fetch-suggestions="querySearch" :placeholder="$t('cr.query')" @select="handleSelect0" clearable>
                  <i class="el-icon-search el-input__icon" slot="suffix">
                  </i>
                  <table slot-scope="props">
                    <tr>
                      <td style="width:200px">{{ props.item.person_notes_cn }}</td>
                      <td style="width:80px">{{ props.item.last_name }}</td>
                      <td style=" width:140px ">{{ props.item.dept }}</td>
                    </tr>
                  </table>
                </el-autocomplete>
                <!-- <el-input v-model="versionReleaseInfo.ParaData.SignUser.ProductCMO" clearable></el-input> -->
              </el-form-item>

　　

書山有路勤爲徑，學海無涯苦做舟。

我在模仿，參照，若有侵權，請聯繫本人刪除。