react、vue国际化方案,webpack插件webpack-i18n-plugin
前言
前端项目react/vue国际化一般都需要开发者逐个去实现,耗时耗力,相关文档可以参考:
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
转载自:https://segmentfault.com/a/1190000041710165