vue-cli3实现分环境打包步骤(给不同的环境配置相对应的打包命令)
在vue-cli3的项目中,
npm run serve时会把process.env.NODE_ENV设置为‘development’;
npm run build 时会把process.env.NODE_ENV设置为‘production’;
此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。
打包时线上环境可能分多种,比如测试环境和生产环境等等。
在vue-cli2中打包时可以修改 “build” 和 “config”中的文件来区分不同的线上环境
而vue-cli3号称0配置,无法直接修改打包文件,那么怎么区分不同的线上环境呢?
1.package.json添加命令"alpha"
"scripts": {
"dev": "vue-cli-service serve",
"serve": "vue-cli-service serve",
"alpha": "vue-cli-service build --mode alpha",
"build": "vue-cli-service build --mode build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
}
2. 在项目根目录添加文件“.env.alpha”,其内容:
NODE_ENV = 'production'
VUE_APP_TITLE = 'alpha'
3.在项目根目录添加文件“.env.build”,其内容:
NODE_ENV = 'production'
VUE_APP_TITLE = 'production'
例: 如在测试生产环境build时不压缩js文件
4.vue.config.js
module.exports = {
chainWebpack: config => {
if(process.env.NODE_ENV === 'production') {
// 测试生产环境, 不压缩js代码
if (process.env.VUE_APP_TITLE === 'alpha') {
config.optimization.minimize(false)
}
}
config.resolve.alias
.set('@', resolve('src'))
}
}
vue-cli3实现分环境打包步骤(给不同的环境配置相对应的打包命令)的更多相关文章
- [转]MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题)
MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题) 网上有一篇shangdong_chu网友写的文章介绍如何在Eclipse上配置M ...
- vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下: ...
- Hadoop分布环境搭建步骤,及自带MapReduce单词计数程序实现
Hadoop分布环境搭建步骤: 1.软硬件环境 CentOS 7.2 64 位 JDK- 1.8 Hadoo p- 2.7.4 2.安装SSH sudo yum install openssh-cli ...
- vue cli3.0打包
1.vue cli3.0需要在项目根目录下配置webpack 包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...
- vue cli3配置开发环境、测试环境、生产(线上)环境
cli3创建vue项目是精简版的少了build和config这2个文件,所以配置开发环境.测试环境.生产环境的话需要自己创建env文件. 需要注意2点: 1.cli2创建项目生成的config文件里的 ...
- vue项目打包步骤及运行打包项目
(1)项目打包 终端运行命令 npm run build 打包成功的标志与项目的改变,如下图: 点击index.html,通过浏览器运行,出现以下报错,如图: 那么应该如何修改呢? 具体步骤如下 ...
- Spring boot项目分环境Maven打包,动态配置文件,动态配置项目
Spring boot Maven 项目打包 使用Maven 实现多环境 test dev prod 打包 项目的结构 在下图中可用看出,我们打包时各个环境需要分开,采用 application-环境 ...
- Vue CLI3和Vue CLI2环境搭建
关于 Vue CLI 旧版本的安装以及创建项目 1.搭建 vue 的开发环境 ,安装 vue 的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm in ...
- vue cli3 打包到tomcat上报错问题
首先 项目打包步骤 1.vue config.js 添加 publicPath: './', // 公共路径 assetsDir:'static', 2.将代理注释掉 proxy 3.将hash需 ...
随机推荐
- oracle跨库连接查询
一.授权(本地客户器端授权当前用户) grant create database link to szfile 第一种连接方法:配置本地数据库服务器的tnsnames.ora文件 SZFILE = ( ...
- JS_高程3.基本概念(3)
1.ECMAScript数值的范围 由于内存的限制,在大多数浏览器中,ECMAScript能够拿保存的数据的范围是 5e-324 ~ 1.7976931348623157e+308,其中最小的数值保存 ...
- 《2019测试面试题-上海悠悠.pdf》
前言 面试测试岗位一般会有笔试题,笔试题考SQL和编程基础比较多,小编最近收集了多家公司的测试面试题,整理成一个文档供大家参考. 2018年下半年一直不太平,听到最多的就是"p2p暴雷&qu ...
- Css3 实现循环留言滚动效果(一)
一.常见留言滚动效果示例 html代码 <div class="runList"> <div class="runitem"> < ...
- RabbitMQ 可靠投递
RabbitMQ 可靠投递 标签: RabbitMQ shovel-plugin ConfirmCallback RabbitMQ消息投递 背景 confirmCallback 确认模式 return ...
- Spring 拦截器postHandle无法修改Response的原因
如果controller跳转至页面,postHandle是没问题的. 如果@ResponseBody注释 或者返回 ResponseEntity,在postHandle拦截器中修改请求头,是无效的. ...
- angular 2 - 006 change detection 脏治检查 - DC
ANGULAR CHANGE DETECTION EXPLAINED 引发脏治检查有三种方式: Events - click, submit, - XHR - Fetching data from a ...
- 如何对正在运行的进程,进行heap profile
简单来说, 就是先preload上tcmalloc, 日常用用没啥问题, 当感觉出现问题时, gdb attach 上, 然后执行 call HeapProfilerStart("xxx&q ...
- Linux远程执行shell命令
Linux远程执行shell命令 在Linux系统中,我们经常想在A机器上,执行B机器上的SHELL命令. 下面这种方案,是一种流行可靠的方案. 1.SSH无密码登录 # 本地服务器执行(A机器) ...
- AI创业的技术方案选择
观察了许多初创公司技术方案的选择,我总结基本遵循8个字:快速灵活,物美价廉.我们也应该根据自身实际情况,跳出束缚与时俱进,选择智能互联网时代最有力的技术和工具. 基础编程语言 候选者:C#/C++/P ...