在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实现分环境打包步骤(给不同的环境配置相对应的打包命令)的更多相关文章

  1. [转]MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题)

    MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题)   网上有一篇shangdong_chu网友写的文章介绍如何在Eclipse上配置M ...

  2. vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)

    在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下: ...

  3. Hadoop分布环境搭建步骤,及自带MapReduce单词计数程序实现

    Hadoop分布环境搭建步骤: 1.软硬件环境 CentOS 7.2 64 位 JDK- 1.8 Hadoo p- 2.7.4 2.安装SSH sudo yum install openssh-cli ...

  4. vue cli3.0打包

    1.vue cli3.0需要在项目根目录下配置webpack  包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...

  5. vue cli3配置开发环境、测试环境、生产(线上)环境

    cli3创建vue项目是精简版的少了build和config这2个文件,所以配置开发环境.测试环境.生产环境的话需要自己创建env文件. 需要注意2点: 1.cli2创建项目生成的config文件里的 ...

  6. vue项目打包步骤及运行打包项目

    (1)项目打包 终端运行命令 npm run build 打包成功的标志与项目的改变,如下图: 点击index.html,通过浏览器运行,出现以下报错,如图: 那么应该如何修改呢?    具体步骤如下 ...

  7. Spring boot项目分环境Maven打包,动态配置文件,动态配置项目

    Spring boot Maven 项目打包 使用Maven 实现多环境 test dev prod 打包 项目的结构 在下图中可用看出,我们打包时各个环境需要分开,采用 application-环境 ...

  8. Vue CLI3和Vue CLI2环境搭建

    关于 Vue CLI 旧版本的安装以及创建项目 1.搭建 vue 的开发环境 ,安装 vue 的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm in ...

  9. vue cli3 打包到tomcat上报错问题

    首先  项目打包步骤 1.vue config.js  添加 publicPath: './', // 公共路径 assetsDir:'static', 2.将代理注释掉 proxy 3.将hash需 ...

随机推荐

  1. oracle跨库连接查询

    一.授权(本地客户器端授权当前用户) grant create database link to szfile 第一种连接方法:配置本地数据库服务器的tnsnames.ora文件 SZFILE = ( ...

  2. JS_高程3.基本概念(3)

    1.ECMAScript数值的范围 由于内存的限制,在大多数浏览器中,ECMAScript能够拿保存的数据的范围是 5e-324 ~ 1.7976931348623157e+308,其中最小的数值保存 ...

  3. 《2019测试面试题-上海悠悠.pdf》

    前言 面试测试岗位一般会有笔试题,笔试题考SQL和编程基础比较多,小编最近收集了多家公司的测试面试题,整理成一个文档供大家参考. 2018年下半年一直不太平,听到最多的就是"p2p暴雷&qu ...

  4. Css3 实现循环留言滚动效果(一)

    一.常见留言滚动效果示例 html代码 <div class="runList"> <div class="runitem"> < ...

  5. RabbitMQ 可靠投递

    RabbitMQ 可靠投递 标签: RabbitMQ shovel-plugin ConfirmCallback RabbitMQ消息投递 背景 confirmCallback 确认模式 return ...

  6. Spring 拦截器postHandle无法修改Response的原因

    如果controller跳转至页面,postHandle是没问题的. 如果@ResponseBody注释 或者返回 ResponseEntity,在postHandle拦截器中修改请求头,是无效的. ...

  7. angular 2 - 006 change detection 脏治检查 - DC

    ANGULAR CHANGE DETECTION EXPLAINED 引发脏治检查有三种方式: Events - click, submit, - XHR - Fetching data from a ...

  8. 如何对正在运行的进程,进行heap profile

    简单来说, 就是先preload上tcmalloc, 日常用用没啥问题, 当感觉出现问题时, gdb attach 上, 然后执行 call HeapProfilerStart("xxx&q ...

  9. Linux远程执行shell命令

    Linux远程执行shell命令   在Linux系统中,我们经常想在A机器上,执行B机器上的SHELL命令. 下面这种方案,是一种流行可靠的方案. 1.SSH无密码登录 # 本地服务器执行(A机器) ...

  10. AI创业的技术方案选择

    观察了许多初创公司技术方案的选择,我总结基本遵循8个字:快速灵活,物美价廉.我们也应该根据自身实际情况,跳出束缚与时俱进,选择智能互联网时代最有力的技术和工具. 基础编程语言 候选者:C#/C++/P ...