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

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

默认情况下，执行 npm run serve 会以 development 的模式启动

执行 npm run build 会以 production 的模式启动

outputDir 可以设置打包后的文件名

执行：

在 production 模式的时候新增一个 VUE_APP_CURRENTMODE 作为正式和测试的标识符

配置正式和测试 build 之后的文件名称

配置 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分支开发
开发完毕之后执行以下流程：

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

vue cli3 一键 build 区分测试环境和正式环境相关推荐

vue cli3 打包build 区分测试环境和正式环境
vue cli3没有了和之前vue cli2一样的配置文件, 但项目中经常会有测试环境和生产环境,经常不同环境的域名是不一致的,因为build构建打包时,process.env.NODE_ENV默认 ...
vue开发环境、正式环境的配置及原理
一.生产环境及正式环境的配置(为了更好地理解,我把起始项目中的代码也进行了展示) congif > dev.env.js:开发环境 congif > prod.env.js:正式(生产)环 ...
Vue启动项目如何区分启动的是开发环境、测试环境、生产环境
1. vue 中有个概念就是模式,Vue CLI 项目有三个模式: development 模式用于 vue-cli-service serve test 模式用于 vue-cli-service t ...
如何优雅的区分测试版本和正式版本的环境
小明一个刚入行安卓的小萌新,刚刚在测试小姐姐那里交过学费(挨过骂)了解到软件开发过程中是需要区分正式.测试环境的.但是他稍加思考就能想到测试.正式环境的区别仅仅是host不一样而已,其他的比如接口名. ...
设置PHP的环境变量，区分PHP的测试环境和正式环境【php】
一,查看环境变量 1,查看 env 查看全局环境变量 set 查看所有环境变量 echo $SHLVL 查看单个环境变量 unset name 删除环境变量针对本次会话有效 2,设置设置环 ...
Spring Boot Spring Cloud 区分开发环境测试环境预发布环境（灰度环境）正式环境
各环境的区别开发环境(dev):开发的时候用的环境测试环境(test):日常测试或者是上线前测试. 预发布环境(灰度环境)(pre):发布前的最后调试,数据源与正式环境一致. 正式环境(prod) ...
vue3.0生产环境和正式环境配置_vue开发环境和生产环境配置
开发环境配置一般情况下开发环境是会跨域的,所以我们只需要在跨域的位置配置即可.进入config/index.js,在proxyTable对象里面添加代码,如下: '/api': { target: ...
前端项目开发者环境和正式环境区别
1.在src目录下创建config文件夹. 2.创建三个文件 development.js export default {oss: 'development',apiUrl: 'http://0.0 ...
vue正式环境和测试环境切换
目的: 根据不同的启动命令应用对应环境的域名及其它变量值创建配置文件: 在项目根目录下创建这四个文件,作用及含义分别为: .env:公用配置文件,不管在哪个环境启动的项目,都会使用这个文件里面的变量 ...

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

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

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

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

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

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

四、使用

版本控制及部署流程

vue cli3 一键 build 区分测试环境和正式环境相关推荐

最新文章

热门文章

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

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

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

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

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

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

四、使用

版本控制及部署流程

vue cli3 一键 build 区分测试环境和正式环境相关推荐

最新文章

热门文章

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

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

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