i18n-vue-loader

一站式解决项目中的国际化处理的过程，通过在webpack打包阶段转换项目中的中文文本为i18n 语法的loader，同时包含自动提取项目中的中文生成i18n语言包，通过调用百度翻译接口自动翻译成其他语言.

(本项目本项目目前绝大多数源码均源自 webpack-i18n-loader ，仅用于学习用途，由于写的实在太香，故没有太多可以改进的地方。再次感谢巨人)

介绍

该loader的主要目的是将国际化资源与项目代码分离维护，这样我们去查找对应文案的时候更加简单方便，如下方demo所示，我们原文件中不需要去使用$t('a018615b35588a01') }} 的方式去声明国际化，通过loader自动进行替换完成我们的国际化工作，这样对开发查找页面文案之类带来了极大的方便。还支持在vue的props中以及单独的js文件中进行国际化处理。

<template>
  <div>你好，世界</div>
</template>
<script>
export default {
  name:'App'
}
</script>

语言包资源文件

//zh.js
module.exports = {
  "a018615b35588a01": "你好，世界" //key是根据中文生成16的MD5值
}

页面在中文下展示为

你好世界

安装

npm i i18n-vue-loader --save-dev
或
yarn add i18n-vue-loader --dev

使用

本组件分为两部分，一部分是cli，目的是为了生成资源文件，一部分是loader，目的是为了替换项目中的中文为国际化的代码，我们最好在打包测试/上线前执行以下cli命令，生成资源文件，然后拷贝一份资源文件给翻译组进行各国语言的翻译，之后将资源文件配置到[email protected]上，再进行打包即可。

1.cli的使用

cli可使用的所有命令

1).自动抓取中文

项目根目录执行

npx i18n collect [src]
Usage:  [options] [command]

Options:
  -v, --version               output the version number
  -h, --help                  output usage information

Commands:
  collect [options] [src]     对src目录下的vue/js文件进行中文提取并生成国际化资源文件，默认src为执行目录下的src目录
  init                        初始化翻译配置项
  translate [options] [code]  开始启用自动翻译
  transform                   已修改的map映射表导入语言包
  clear [src]                 清除未再使用的语言包

请务必记住上述的国际化资源文件的路径和文件名，loader中需要配置，若未设置采用默认，loader中也可以不用设置

2).自动翻译

npx i18n init 
初始化翻译配置项（如已有配置项，不要重复执行，不然会覆盖）

npx i18n translate [code]
开始翻译文件 
默认中文翻译成英文   code  默认值为en

Options:
  -f, --file <filename>,  选择翻译的文件，默认选取目录下的src/lang/locale目录下的文件

code必须为百度翻译文档上的code值

初始化项目，生成的配置文件 i18n-config.json

module.exports = {
	dir: "./src/lang/locale/", // 目标目录
	file: "zh.js", // 翻译的源文件
	appId: "", // 百度翻译appid
	secret: "", // 百度翻译密钥
};

具体可查看 百度翻译文档：https://fanyi-api.baidu.com/product/113

3).清理语言包

npx i18n init 
初始化翻译配置项（如已有配置项，不要重复执行，不然会覆盖）

npx i18n clear 
清理语言包内已无效的值（使用频率：建议半年或一年以上，用于清理已无用的语言包）

4).跳过中文抓取

js文件和vue文件内被<i18n-ignore (跳过的内容) i18n-ignore> 包括的内容将不会进行抓取

使用实例 js语法

// <i18n-ignore
const str = "我的世界"
// i18n-ignore>

template内使用

<!-- <i18n-ignore -->
<div>我的世界</div>
<!-- i18n-ignore> -->

2.loader的使用

在vuecli4中做如下配置。

// vue.config.js
const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);

module.exports = {
  //其他配置 ...
  chainWebpack: (config) => {
    // i18n loader
		config.module
			.rule("i18n-loader")
			.test(/\.(js|vue)(\?.*)?$/)
			.pre()
			.include.add(resolve("src"))
			.end()
			.use("i18n-vue-loader")
			.loader("i18n-vue-loader")
			.options({
				localeFile: resolve("src/lang/locale/zh.js"),
				localKey: "local",
      	target:"@/lang",
				whitePathList: [resolve("src/config/libs"), resolve("src/config/svgIcons")],
			})
			.end();
  }
}

传入给loader的参数如下

• localeFile : 本地国际化的文件路径（上面执行 collect 后生成的路径，默认为 src/lang/locale/zh.js）
• localKey : localeFile中导出数据的key值，不设置则自动获取localeFile中导出的数据，设置值则将国际化数据设置为相应key值的数据
• target : i18n的引入路径,默认为 @/lang
• whitePathList ： 不做替换处理的文件目录列表，loader会自动跳过该目录下的文件

3.国际化资源配置

此处一定要注意！！！否则是个坑。

国际化的配置一定一定要在所有逻辑之前，建议采用 i18n.js 文件单独配置，然后在入口文件最先引入这个文件即可！ 要确保传入参数中的 target 路径可以取到i18n对象

vue2版本

//i18n.js 国际化配置文件
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
    locale: 'zh',
  	fallbackLocale: "zh", // 没有对应语言包时的替换方案
    messages:{
      'zh': ...require('./locale/zh'),
    },
});
export default i18n;

//main.js 入口文件
import i18n from '@/i18n';

vue3版本

//i18n.js 国际化配置文件
import { createI18n } from "vue-i18n";

const i18n = createI18n({
    locale: "zh", //默认显示的语言
  	fallbackLocale: "zh",
    messages:{
      'zh': ...require('./locale/zh'),
    },
});

export default i18n;

//main.js 入口文件
import i18n from '@/i18n';

注意

• 建议字符串的连接用模板字符串方式，这样其中涉及到的一些动态参数也会自动生成 {0} {1} 这样的参数注入
• cli命令建议在根目录直接执行 npx i18n collect,这样在配置loader的时候不需要额外配置，减少出错几率，如果需要自己配置参数，一定要记住，国际化资源目录一定要是单独的，否则会被loader替换的时候将资源文件也替换掉，同时在配置loader 的时候，参数值一定为目录+文件名的值（包括后缀）
• 尽量避免使用 \ 转义字符

鸣谢

webpack-i18n-loader