vue 使用i18n 切换中英文

254 阅读1分钟

第一步:安装vue-i18n

npm install vue-i18n  我建议是安装8.27.1版本

image.png

第二步 在scr文件夹中常见i18n文件夹 里面新建三个js文件 分别对应 英文、中文、以及导出文件

image.png

lang_en.js

//English
module.exports = {
    newhome: {
            Tasknew: 'Task',
    VehicleCoR: 'Vehicle CoR',
    dac: 'Dealer Accrual',
    Target: 'Target Management',
    Budget: 'Budget Planning',
    task: 'Supporting Doc',
    dealermanage: 'Dealer Portal Management'
    }
}

lang_zh.js

// chinese
module.exports = {
    newhome: {
            Tasknew: '工作任务',
            VehicleCoR: '整车返利',
            dac: '经销商返利销售支持',
            Target: '目标管理',
            Budget: '预算管理',
            task: '支持文档上传',
            dealermanage: '经销商管理'
    }
} 

lang.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
//合并对象的方法
function concatkeyvalue(map){//map = [{..},{..}]
    let newmap = {}
    map.forEach(items => {
        for (var key in items) {
                newmap[key] = items[key]
        }
    })
    return newmap
}
//将各个文件的中英文翻译全部合并
let zh = concatkeyvalue([require('./lang_zh.js')])
let en = concatkeyvalue([require('./lang_en.js')])
 
const i18n = new VueI18n({
    locale: 'en',  // 语言标识
    messages: {
        'zh': zh,
        'en': en
    }
})
export default i18n

在入口文件main.js中导入i18n

image.png