vue中使用i18n配置国际化多语言

1.安装

 npm install --save vue-i18n

2.本地语言包配置

新建文件夹，结构如下

以TextLangs为例
TextLangs/zh-CN.js

import Locale from 'element-ui/lib/locale/lang/zh-CN'

    const langs = {

        language: {"lang_1":"简体中文","lang_2":"繁體中文","lang_3":"English",},

        ...Locale
    }

    export default langs
    
    

TextLangs.index.js

import en from './en'
import zh_TW from './zh-TW'
import zh_CN from './zh-CN'

export default {
    en,
    zh_TW,
    zh_CN
}

3.使用node将外部多语言文件写入本地

新建文件夹，结构如下

langAutomation/input/index.js
将lang_list.xlsx表格中的语言写入config/i18n中的相应文件夹

const xlsx = require('node-xlsx')

const fs = require('fs');

//表列表
let listName = [
    {
        name: '一般文案',
        value: 'Text'
    },{
        name: '错误码文案',
        value: 'Error'
    },{
        name: 'SMS错误码文案',
        value: 'SMS'
    },{
      name: '订单状态',
      value: 'STATUS'
    },{
      name: '迭代文案',
      value: 'Iteration'
    }
]

//多语言列表
let typeName = [
    {
        name: '简体中文',
        value: 'zh-CN'
    },{
        name: '繁体中文',
        value: 'zh-TW'
    },{
        name: '英语',
        value: 'en'
    }
]

//readdir为读取该文件夹下的文件
//读取后缀为xlsx的文件

fs.readdir('.', function(err,files){
   
    files.forEach((file) => {

        if(file.split('.')[file.split('.').length-1] === 'xlsx'){
            
            let path = `${__dirname}/${file}`;

            //表格解析
            let sheetList = xlsx.parse(path);

            //对数据进行处理
            sheetList.forEach((sheet) => {

                let nameList = listName.filter((item) => item.value == sheet.name)

                if(nameList.length > 0){
        
                    sheet.data.forEach((row, index) => {
 
                        let rowIndex = index;
        
                        row.forEach((cell, index) => {
        
                            let colIndex = index;
        
                            if(cell !== undefined){
            
                                sheet.data[rowIndex][colIndex] = cell.replace(/replaced text1/g, '')
        
                                    .replace(/replaced text2/g, '');
        
                                let reg = /\{([\u4e00-\u9fa5\.\w\:\、\/\d\s《》-]*)\|[\u4e00-\u9fa5\.\w\:\、\/\d\s《》-]*\}/;
       
                                let tempStr = sheet.data[rowIndex][colIndex];
        
                                while(reg.test(tempStr)){
        
                                    tempStr = tempStr.replace(reg, RegExp.$1);
        
                                }
        
                                sheet.data[rowIndex][colIndex] = tempStr;
                            }
        
                        })
        
                    })

                }
        

            })
            
            //把数据分组
            let textList= []

            for(let i=0; i<listName.length; i++){

                let indexD = listName[i]['value']
                
                textList[indexD] = {}
                
                for(let l=0;l<typeName.length;l++){

                    let index = typeName[l]['value']
    
                    textList[indexD][index] = {}
    
                }

            }
            
            sheetList.forEach((list) => {

                let newList = listName.filter((item) => item.value == list.name)
                if(newList.length > 0){
                    list.data.forEach((value, index) => {
                    
                        if(index !== 0 && value.length > 1){
    
                            combin(textList[list.name],value)
                        }
    
                    })
                }

            })
            
            //数据进行缓存
            let buffer = xlsx.build(sheetList);

            //将数据写入到相应的文件下

    listName.forEach((valD, key) => {

        typeName.forEach((val, index) => {
            //目录
            let writePath = `${__dirname.split('langAutomation')[0]}src/config/i18n/${valD.value}Langs/${val['value']}.js`
            //写入内容
            let content = odefile(textList[valD['value']][val['value']],val['value'])


            fs.writeFileSync(writePath, content, 'utf8', function(err){ 

                if (err) {

                    console.log(err);

                    return ;

                }

            });


        })

    })
        }

    })

})

//合并数组
function combin(a,b){
    for(var i=1; i<b.length; i++){
        a[typeName[i-1]['value']][b[0]] = b[i]

    }
    
    return a;
}

//导入数据模板
function odefile(arr, type) {
    let content = `import Locale from 'element-ui/lib/locale/lang/${type}'

    const langs = {

        language: ${JSON.stringify(arr)},

        ...Locale
    }

    export default langs
    
    `

    return content
}

3.创建i18n实例

config/i18n/i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale'
import messages from './TextLangs'
import errorCode from './ErrorLangs'
import SMSErrorCode from './SMSLangs'
import STATUS from './STATUSLangs'
import Iteration from './IterationLangs'

Vue.use(VueI18n)

Object.assign(messages.en.language, errorCode.en.language, SMSErrorCode.en.language,STATUS.en.language,Iteration.en.language)
Object.assign(messages.zh_CN.language, errorCode.zh_CN.language, SMSErrorCode.zh_CN.language,STATUS.zh_CN.language,Iteration.zh_CN.language)
Object.assign(messages.zh_TW.language, errorCode.zh_TW.language, SMSErrorCode.zh_TW.language,STATUS.zh_TW.language,Iteration.zh_TW.language)

let lang = JSON.parse(sessionStorage.getItem('vuex')) 

const i18n = new VueI18n({
    locale: lang ? lang['public']['lang'] : 'zh_CN', // 语言标识
    messages, // 语言包
    silentTranslationWarn: true, // 没有的key值不发出警告
})

locale.i18n((key, value) => i18n.t(key, value))

export default i18n

4.在main.js中引入，挂载到跟实例

import i18n from "@/config/i18n/i18n"; 

// 挂载到跟实例
new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount("#app");

5.使用

执行命令将xlsx表格写入文件

cd .\langAutomation\input
node .\index.js

template 中使用

{{$t('language.lang_1')}}

js中使用

this.$t('language.lang_1')