前言

前端我的项目react/vue国际化个别都须要开发者一一去实现，耗时耗力，相干文档能够参考：

  1. vue-i18n文档
  2. react-intl 国际化 文档指引

webpack-i18n-plugin插件次要解决了两个痛点问题,实用于vue、react我的项目

  • 提取我的项目中的国际化资源文件

    在webpack中配置插件(webpack-i18n-plugin)，即可提取出中文资源

  • 增加国际化代码

    增加plugins，编译后主动增加国际化全局办法$i8n，对源码无污染

具体应用办法如下：

装置

npm install webpack-i18n-plugin -D

webpack plugins 配置

const i18nPlugin = require("webpack-i18n-plugin");// webpack.config.jsplugins: [  ...  new i18nPlugin(i18nConfig),  ...]// vue.config.jschainWebpack: (config) => {  config.plugin("i18n").use(i18nPlugin).tap((options) => {    return [...options, i18nConfig];  });}

babel plugins 配置

// .babelrc | babel.config.jsplugins:[  ...  "webpack-i18n-plugin/babel"]

插件配置项i18nConfig

const i18nConfig = {  i18nDir: path.resolve(__dirname, "./i18n"), //国际化目录（可选）  translation: {    en_US: [path.resolve(__dirname, "翻译文件.xlsx")], //en_US语言包    ...  },};