React 不同的环境打包不同的域名

Posted 2023-04-12

参考技术A 在开发中，常见的现象：生产环境、测试环境、开发环境的域名都不同，怎样去根据不同的环境需求打包不同的域名呢？

方案一：每次打包之前更改 axios.defaults.baseURL

方案二：配置相应的build命令

复制一个script文件夹下的build.js文件，更改文件名

打开文件，更改process.env.NODE_ENV值

新建一个config文件

config.js

将config.js引入自定义的axios方法文件内

打开package.json文件
新增命令

执行命令：npm run build:st就可以打包出相应的域名api

webpack配置不同打包配置

• 生成环境与开发环境打包配置
• 使用package.json配置npm run开启不同的打包配置

 。。。webpack基本使用最后一篇博客

在上一篇博客中详细的演示了webpack开启本地服务和热更新，这个超级爽的技能你有没有发现问题呢？反正我是发现了，那就是只适合开发环境下使用，生成环境打包显然不合适，在前面的博客中也有提到过关于针对不同环境的打包，但没有具体演示怎么做，其实很简单，就是配置两套打包配置，至于要怎么执行具体的环境打包配置不必要在这里说明，毕竟每个项目和环境还有开发配置都不同，大家针对自己的需求配置就是了，这里只告诉你怎么开启不同打包配置命令：

配置两个打包配置文件：

1 //生成环境配置--配置文件名各位自己定义（我的配置名是：webpack-dev.config.js）
2 module.exports = 
3     mode:‘development‘
4 
5 
6 //生成环境配置--配置文件名各位自己定义（我的配置名是：webpack-prod.config.js）
7 module.exports = 
8     mode:‘production‘
9 

然后通过npm指令开启不同打包配置：

webpack --config webpack-dev.config.js//开启生成环境下的打包
webpack --config webpack-prod.config.js//开启生成环境下的打包

是不是觉得这样的指令敲起来很麻烦，这时候我们当然后必要将他变得简单一点：

1 //在package.json文件中配置scripts
2   "scripts": 
3     ...
4     "dev":"webpack --config webpack-dev.config.js --color",
5     "prod":"webpack --config webpack-prod.config.js --color"
6   ,

然后执行npm run ...就可以将原本很常的一条指令用简练的方式调用触发了：

npm run dev//启动开发环境打包
npm run prod//启动生产环境打包

终于，webpack第一阶段的应用博客写完，后期慢慢研究一些关于webpack的底层实现和实际生产过程中遇到一些问题再来码一波。