react 打包env加载json 变量输出到html

JS脚本　2023/10/13 21:13:54　　点击：不统计

第一次使用react，学习加载.env 配置json 到 html 输出。

1. json文件,文件目录参考下面

{

"WL": {

"loading":"加载中",

"menu": "菜单"

}

2. 增加打包配置

在webpack.config.js 中，增加下面，让系统打包调用.env 配置。

# 加载.env

require('dotenv').config();

# 组织路径，__dirname 标示当前 webpack.config.js 目录

const appPath = path.join(__dirname, "client", "app");

# 上面实际路径为 ./client/app

# 判断加载参数 WEB_LANGUAGE值，返回对应文件名称

const web_language_file = "CN" === process.env.WEB_LANGUAGE ? "Language.CN.json": "Language.EN.json";

# 连接文件名称，组成文件

const web_language_file_data = require( appPath + "/" + web_language_file);

在 plugins 中增加下面配置，三个点是固定前缀，后面标示上面引入的json 数组内容

HtmlWebpackPlugin({

...web_language_file_data

}),

3. 在html中输出内容, 下面输出 “菜单” 注意WL 与 json 的key 一致。