多语言插件工具-i18n tools对于一些跨国项目，国际化尤为重要。使用i18n时，配置语言包的过程十分繁琐，需要花费

前言

对于一些跨国项目，国际化尤为重要 国际化的处理基本思路如下

① 定义语言包：需要几种语言展示，就定义几个语言包

② 创建对象，对语言包进行整合，对象的 key 为语言包的引用，值为语言包对象

③ 创建 vue-i18n 类的对象，同时为其 messages 属性为第②步创建的对象，为其 locale 属性赋值为第②步中语言对象对应的 key

④ 在创建 Vue 实例对象时，挂载 vue-i18n 类的对象

多语言插件

使用i18n时，配置语言包的过程十分繁琐，需要花费很多时间，需要i18n转化的文本可以分为以下几类

• 纯文本
• 按钮文本
• label
• placeholder
• $message的文本提示
• $confirm确认框文本提示
• form表单的rule检验提示
• 弹窗title

通过$t函数替换之前的文本，例如label和placeholder的替换

<el-form-item :label="$t('frmpEvent.eventName')" prop="eventName"> 
    <el-input v-model="form.eventName" maxlength="100" :placeholder="$t('common.enterPla')" clearable type="text" /> 
</el-form-item>

为了提高配置语言包的效率，这里可以用i18n tools（vscode插件），通过这个插件可以实现自动提取文件中需要翻译的文本，自动生成对应语言包文件，还支持配置翻译api实现语言翻译。

使用前要配置好输出的文件夹和文件名

module.exports = {
  entry: ['src'], // 提取、还原、遗漏扫描入口文件夹，可以配置多个,默认是 src
  outDir: 'src/common/js/i18n/tools', // i18n 输出文件夹 默认是 src/locales
  outShow: 2, //输出文件展示结构 1 扁平化结构 2树级结构 默认扁平化
  exclude: ['src/common/js/i18n/tools'], // 不提取的文件夹, 默认是 ['src/locales']
  extensions: ['.vue', '.js', '.ts'], // 提取的文件后缀名，默认是 ['.js', '.vue', '.ts']
  filename: 'zh_tools', // 输出的文件名,默认为 zh_cn
  extname: 'js', //  输出的文件后缀名默认为 js  ,支持json和js（js格式为 module.exports = {} 或 export default {}），
  langList: ['en'] // 翻译目标语言列表，默认是 ['en']   
}

具体操作：右键选择i18n-tools国际化工具-选择提取当前，他就会自动提取文件中的文案，使用$t进行替换

提取后会生成这样一个js对象

module.exports = {
	"risklist": {
		"index": {
			"374963": "确定删除该条数据, 是否继续?",
			"onp488": "删除成功!",
			"24q1j6": "定稿成功",
			"yqzyk8": "确定撤销审批, 是否继续?",
			"q87l70": "撤销成功!"
		}
	},
	"components": {
		"newrisklist": {
			"111868": "序号",
			"578396": "请选择风险管理价值链",
			"51847k": "提示",
			"suvwc1": "取消",
			"wabt28": "管控措施",
			"l81ya3": "风险大类",
			"3xw354": "风险组别",
			"si6m67": "业务管理价值链",
			"42moef": "风险管理价值链",
			...
		}
	}
}

这里如果需要前端先进行文案翻译，可以选择翻译项目，他会对生成的zh_tool进行翻译，这个插件支持多种翻译，可以在settings.json中进行配置

• 翻译密匙申请： 百度翻译申请参考 腾讯翻译申请参考 火山翻译申请参考 谷歌翻译申请参考 DeepL翻译申请参考

settings.json配置示例

"i18nTools.translateForm": "bd",
  "i18nTools.translateKey": {
    "BD_APP_ID": "xxx",
    "BD_KEY": "xxx",
    "TX_SECRET_ID": "",
    "TX_SECRET_KEY": "",
    "HS_ACCESS_KEY": "",
    "HS_SECRET_KEY": "",
    "GOOGLE_API_KEY": "",
    "DEEPL_API_KEY": ""
  },

这里有一点需要注意：多语言翻译对应的文件名固定是en.js无法更改，如果原来项目中已有en.js文件，他会生成不了对应的翻译文件，这时候可以在其他目录下生成，就不会造成冲突， 例如：

插件提取的注意事项

含有静态中文路径的数据，也会被提取翻译，需要还原回去

data() {
  return {
      loading: false,
      searchForm: {
          orgId: '', 
          orgPathName: '',
      },
      url: '/static/xlsx/清单模板.xlsx',
	// url: this.$t('components.newrisklist.2493x5')
	}
}

// 下载模板
exportTemplate() {
    window.location.href = '/static/xlsx/导入模板.xlsx';
	// window.location.href = this.$t('riskindicatorssetting.index.6q383f')
},

split方法涉及的分隔符，需要确认数据是否还是按中文返回

// 提取前：this.month = this.quesNo[3].split('月'))[0];
this.month = this.quesNo[3].split(this.$t('components.newrisklist.k62tdm'))[0];

indexOf方法涉及到中文字符，也需重新确认

// 获取清单详细数据新增后尾部的值
// 提取前：（item.levelStRiskNum.indexOf('新增')）> -1)
if (item.levelStRiskNum.indexOf(this.$t('components.riskidentification.496m8d')) > -1) {
        arr1.push({ riskNo: item.levelStRiskNum });
 }