vue cli3 一键 build 区分测试环境和正式环境

vue cli3 打包 build 区分测试环境和正式环境

通过自定义环境变量文件进行配置
思路：

1. 默认情况下，执行 npm run serve 会以 development 的模式启动
2. 执行 npm run build 会以 production 的模式启动
3. outputDir 可以设置打包后的文件名

执行：

1. 在 production 模式的时候新增一个 VUE_APP_CURRENTMODE 作为正式和测试的标识符
2. 配置正式和测试 build 之后的文件名称
3. 配置 build 命令一次打两个包

结果：就可以一个命令打出正式和测试两个包啦~

以下是我实际开发中的使用

一、在项目根目录下新建三个配置文件.env .env.test .env.build

.env 无论哪个环境都会加载的配置文件

NODE_ENV=development
VUE_APP_API_BASE_URL=测试域名

.env.test 测试环境加载的配置文件

outputDir=dist-test
NODE_ENV=production
VUE_APP_CURRENTMODE=test
VUE_APP_API_BASE_URL=测试域名

.env.build 正式环境加载的配置文件

outputDir=dist
NODE_ENV=production
VUE_APP_CURRENTMODE=build
VUE_APP_API_BASE_URL=正式域名

二、修改项目根目录下的 package.json 文件

	// 在scripts中加入以下代码
	"scripts": {
    
    
		"serve": "vue-cli-service serve",
	    "build:prod": "vue-cli-service build --mode build",
    	"build:test": "vue-cli-service build --mode test",
    	"build": "vue-cli-service build --mode build && vue-cli-service build --mode test",
	}

三、修改项目根目录下的 vue.config.js 文件

	outputDir: process.env.outputDir

四、使用

	
	npm run serve        // 本地运行
	npm run build:prod   // 打包正式 dist 文件
	npm run build:test   // 打包测试 dist-test 文件
	npm run build		 // 打包 dist 和 dist-test 两个文件

版本控制及部署流程

项目有两个分支： 主分支master 、开发分支dev，默认在dev分支开发
开发完毕之后执行以下流程：

1. npm run build:test 打包测试 dist 文件
2. git push origin dev 提交到云端 dev 仓库
3. 在测试服务器 git pull origin dev 拉取进行测试
4. git checkout master 切换到 master 分支
5. git merge dev 合并 dev 分支到 master 分支
6. npm run build:prod 打包正式 dist 文件
7. git push origin master 提交到云端 master 仓库
8. 在正式服务器 git pull origin master 拉取正式代码