likes
comments
collection
share

react、vue国际化方案，webpack插件webpack-i18n-plugin

作者站长头像
站长
· 阅读数 17

前言

前端项目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.js
plugins: [
  ...
  new i18nPlugin(i18nConfig),
  ...
]

// vue.config.js
chainWebpack: (config) => {
  config.plugin("i18n").use(i18nPlugin).tap((options) => {
    return [...options, i18nConfig];
  });
}

babel plugins 配置

// .babelrc | babel.config.js

plugins:[
  ...
  "webpack-i18n-plugin/babel"
]

插件配置项i18nConfig

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

切换语言

确保语言包最先加载到页面中，中文无需引入语言包

// 页面入口 app.js
const en_US = require("./i18n/en_US"); // 对应语言包
window.$i8n.locale(en_US); // $i18n为全局变量
// other code