Galan小屋

welcome my blog

Vue2国际化vue-i18n解决办法

By galan99

发表于 2017-12-12

vue-i18n和Element国际化使用

vue-i18n版本为6.x 与 elementUI有冲突,以下是解决办法。

1.npm install –save vue-i18n

2、引用 –为了方便后去优化，单独新建一个i18n.js文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'

/*element ui国际化*/
import locale from 'element-ui/lib/locale'
import messages from './yuyan' //多语言文字入口

Vue.use(VueI18n)


let langNow;
if (localStorage.lang) {
    langNow = localStorage.lang;
} else {
    localStorage.lang = 'en';
    langNow = 'en';
}

const i18n = new VueI18n({
    locale: langNow,
    messages,
})

locale.i18n((key, value) => i18n.t(key, value))//为了实现element插件的多语言切换


export default i18n

3、duoyu文件夹的代码：

index.js

import en from './en'
import zh from './zh'


export default {
    en: en,
    zh: zh,
}

4、下面仅用 en.js做展示,enLocale是elementUi的多语言文件，通过…enLocale进行解析，与我们自己搭建的en.js进行合并

import enLocale from 'element-ui/lib/locale/lang/en'
export default {
    "lang": "en",
    "pages": {   
        "changelog": {
            "1": "Changelog",
            "2": "en-US"
        }
    },
    duoyu: {
        message: {
            hello: 'hello world',
        },
    },
    ...enLocale
}

5、调用–在main.js里面引入

import i18n from './i18n'
new Vue({
    i18n,
    router,
    store,
    render: h => h(App)
}).$mount('#app');

6、在vue文件里面的实现

// <p></p>
在js代码里面调用多语言字段
this.$t('duoyu.message.hello')

语言切换动作
localStorage.lang = this.lang;
this.$i18n.locale = this.lang


调用
list.vue
<template>
    <div>
        <el-button type="primary" @click="handleBuild" :bind="$t('name')">$t('home')</el-button>
        <el-table-column prop="status" :label="$t('name')" min-width="100">
            <template scope="scope">
                <p :class="scope.row.status == 1?'success':'danger'">scope.row.status | statusChange($i18n)</p>
            </template>
        </el-table-column>
    </div>   
</template>
<script type="text/javascript">
export default{
    data:function(){
        return {
            list:[]
        }
    },
    filters: {
        statusChange(val,type) {
            var status='';
            switch(parseFloat(val)){
                case -1:
                    status=type.t('status-1');                       
                break;
                case 0:
                    status=type.t('status0');
                break;
                case 1:
                    status=type.t('status1');
                break;
            }
            return status;
        },
    }      
}
</script>

分类

标签