通过vue-cli脚手架构建出一个前端项目，通过npm run build打包，发布到线上，但是这样做需要每次都手动修改接口地址。我们可以通过自行配置打包命令实现无需修改接口地址，打各个环境的包。

文档结构大致如下图：

1.找到config文件夹下的dev.env.js，将其修改成如下图所示：

注：这里BASE_API： '/api'，是做了一个代理配置，主要解决跨域问题的，如果有不懂的可以看看我之前的文章前端开发问题集：遇到跨域问题怎么办，这么解决就行了

2.在config文件夹下创建一个test.env.js,在test.env.js中添加代码如下图所示：

3.然后修改prod.env.js中的内容，如下图所示：

4.找到项目中设置axios基本配置的文件，将baseURL的参数配置成process.env.BASE_API，如下图所示：

5.对build中webpack.prod.conf.js，找到 const env = require('../config/prod.env')，将其修改为const env = config.build[process.env.env_config+'Env']

6.修改config文件夹下的index.js,找到build:

7.使用npm install cross-env –save-dev命令安装 cross-env

8.找到build文件夹下的build.js

将process.env.NODE_ENV = 'production'和 const spinner = ora('building for production...')注释，并将引用了spinner的地方也一并注释。

9.修改package.json文件，修改script中内容

添加"test": "cross-env NODE_ENV=test env_config=test node build/build.js"

修改build, 改为"build": "cross-env NODE_ENV=production env_config=production node build/build.js"

测试环境打包命令： npm run test

正式环境打包命令： npm run build

这样就可以实现分环境打包了,修改完之后，以后再要对不同环境进行打包时，不需要每次打包都要去修改一次接口地址了，是不是很方便了呢~

如有错误，欢迎指正~

码字不易，求关注~求转发~~~