vue配置命令区分构建环境

背景

公司某项目分测试环境和正式环境，git有三个分支dev:开发分支、preview:测试分支、master:正式分支 ，测试环境构建出来的的静态资源要放到当前服务器也就是测试服务器，而正式环境构建出来的静态资源是传到七牛cdn，两个环境对生成资源的要求不同。

初次尝试

由于项目是基于vue3可开发的，本来打算通过修改vue.config.js中的publicPath字段来修改构建后的资源输出路径。但想了想有个很大的问题，这么做也就意味着preview和master分支上的配置文件是不同的，但是在上线之前又必须将preview先合并到master分支，会导致master分支的配置文件被覆写。

最终解决

可有什么能难倒我王路飞呢，经过一些搜索尝试，找到一种解决方案，给大家分享一下。

我们知道通过vue-cli创建的项目，会导出一个内部环境变量:process.env.NODE_ENV

• yarn serve时会把process.env.NODE_ENV设置为‘development’；

• yarn build 时会把process.env.NODE_ENV设置为‘production’

我们可以通过增加一些配置和命令来区分构建时的环境：

1. 在package.json中增加一条命令，preview处可自定义

   "build-preview": "vue-cli-service build --mode preview"

2. 在项目根目录创建一个名为 .env.preview的文件，内容如下

   NODE_ENV = 'preview'

3. 然后需要在vue.config.js中做如下改动

4.由于我们的项目是通过Jenkins部署的，最后只需要改下构建脚本，测试环境执行yarn build-preview就OK了

vue2配置方法补充

1. 安装cross-env扩展到开发环境 yarn add -D cross-env

2. package.json中配置构建命令

   "build:composite": "cross-env NODE_ENV=production env_config=自定义 node build/build.js"

3.文件中判断process.env.env_config