【vue】配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境

最新推荐文章于 2023-09-04 12:24:04 发布

原创

最新推荐文章于 2023-09-04 12:24:04 发布 · 1.1w 阅读

收录于

背景：在前后端分离开发的项目中，一般会有开发环境、测试环境、预上线环境和生产环境。

1.在开发环境下调试接口的时候，一般都会有好几个接口地址，需要根据情况手动来切换接口地址；

2.打包时要部署项目到不同的环境，而这也需要每次都根据情况切换接口地址。

虽然，手动切换地址可以满足需求，但是这种方式不是一种较为便捷的处理方式。我们可以选择一种较为方便的方式来解决这个问题。 可以通过修改配置文件，让启动和打包项目时，根据不同的命令，打到预期的效果。

https://blog.csdn.net/qq_20097569/article/details/82492819

下面，以Vue项目为例，介绍一下解决办法：

一、在启动项目时，需要修改/package.json、/config/dev.env.js和/src/main.js文件

（1）在/package.json中，为启动命令设置不同的参数

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev_test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js",
    "dev_prod": "webpack-dev-server --inline --progress --e