• 在项目开发过程中，我们的项目一般分为开发版，测试版，生产版，之前每次发布不同的版本都需要在源码中修改api地址然后再次打包，这样就很麻烦，如果可以根据不同环境进行打包就完美了。

下面就来介绍如何进行分环境打包(前提是你已经创建好了一个vue项目，我这里用的是vue4)

第一步：打包package.json文件

可以看到scripts

我们添加一个test打包环境

"test":"vue-cli-service serve --mode test"

 

 解释： serve是运行命令，serve默认运行的环境是development环境

             build是打包命令， build默认打包的环境是production环境

npm run serve //运行项目
npm run test // 运行test环境项目
npm run build //默认打包production环境项目

第二步：在根目录下新建文件.env.test 并且 添加代码

NODE_ENV = 'test'
VUE_APP_TITLE = 'test'
VUE_APP_One = 'http://888.888.888.88'
outputDir="heyufu-bu ild-test"

 继续创建环境文件.evn.prod

NODE_ENV = 'prod'
VUE_APP_TITLE = 'prod'
VUE_APP_One = 'http://999.999.999.99'
outputDir="heyufu-build-prod"

 将prod环境追加到package.json文件中

第三步：那么如何获取到我们不同环境的不同api地址呢？

通过：

console.log(process.env.VUE_APP_One)

 我在登陆页面做了测试：

然后通过命令   npm run serve 启动项目

控制台结果：

发现找不到，这是为什么？

注意！！ 要打印的process.env.VUE_APP_One 是在不同环境下的api，serve默认下运行的是development环境，我这里没有这个环境，所以找不到地址

所以我们需要运行不同的 运行命令

我们现在有test环境和prod环境，我们现在分别来运行一下，在控制台中分别显示他们不同环境下的不同api地址

运行test环境：

npm run test

 

运行成功结果：

 

可以看到这个时候的VUE_APP_One打印出来的就是我们上面在 .env.test文件中写的地址

运行prod环境：

可以看到这个时候的VUE_APP_One打印出来的就是我们上面在 .env.prod文件中写的地址

第四步：运行完了，我们要开始打包的过程：

我们在打包之前需要在package.json中添加不同环境的打包命令

默认的build是打包production，但是我们当前的系统没有production环境，我们需要指定不同环境的打包命令：

进行分环境打包：

npm run build 

 生成test环境的打包文件

npm run build:prod