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>

书山有路勤为径，学海无涯苦作舟。

我在模仿，参照，如有侵权，请联系本人删除。

巴特西

element-ui国际化探索（大型项目适用）

vue.js+vue-i18n+elementUI国际化

$t()绑定方式

最新文章

热门文章