项目开发中常分为开发环境、测试环境、正式环境

通过vue-cli或者@vue/cli脚手架搭建的项目默认提供了开发环境和正式环境的配置。可通过js获取当前域名或其他信息来判断当前为测试环境还是正式环境来加载执行对应的东西,例如请求的服务端地址、不同的图片资源等等,但这样很不方便,可通过配置build命令来构建测试包和正式包。

以vue-cli为例:下面是vue-cli生成的目录结构,包含了build和config配置文件夹

首先安装cross-env插件:npm install cross-env --save-dev

(cross-env的作用:通过js在项目中设置不同的环境变量的插件)

第一步:在build文件夹内新建build_test.js文件,内容复制build.js

修改process.env.NODE_ENV = "buildtest"和const webpackConfig = require('./webpack.test.conf')

第二步:在build文件夹内新建webpack.test.conf.js文件,内容复制webpack.prod.conf.js

修改const env = require('../config/test.env')

第三步:修改build/utils.js

第四步:修改build/webpack.base.conf.js

第五步:修改config/index.js中build配置对象,将测试环境和正式环境的打包文件分文件夹存放

图片

第六步:在config文件夹内新建test.env.js,内容为:

对应dev.env.js & prod.env.js配置开发环境和正式环境的baseURL等信息

第七步:在package.json -> "script": {}中配置相关执行命令

npm run dev / npm run serve / npm run start运行开发环境

npm run build:prod构建正式包

npm run build:test构建测试包

npm run publish同时构建测试包和正式包

注:

项目中可使用process.env.NODE_ENV判断三个环境,process.env.baseURL获取对应环境的服务端请求地址

vue-cli2.x配置build命令构建测试包&正式包的更多相关文章

  1. @vue/cli3+配置build命令构建测试包&正式包

    上一篇博客介绍了vue-cli2.x配置build命令构建测试包和正式包,但现在前端开发vue项目大多数使用新版@vue/cli脚手架搭建vue项目(vue create project-name) ...

  2. vue使用npm run build命令打包

    vue使用npm run build命令打包项目   当我们使用vue-cli脚手架完成一个项目的时候,下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢,我们在本地调试的时候只要命令行执行 ...

  3. vue cli2.x配置多环境打包

    一.安装 npm install --save-dev cross-env 二.配置步骤 1.修改config下的文件 //test.env.js 'use strict' module.export ...

  4. 4.0、Android Studio配置你的构建

    Android构建系统编译你的app资源和源码并且打包到APK中,你可以用来测试,部署,签名和发布.Android Studio使用Gradle,一个高级的构建套件,来自动化和管理构建进程,同时可以允 ...

  5. Dubbo入门到精通学习笔记(十四):ActiveMQ集群的安装、配置、高可用测试,ActiveMQ高可用+负载均衡集群的安装、配置、高可用测试

    文章目录 ActiveMQ 高可用集群安装.配置.高可用测试( ZooKeeper + LevelDB) ActiveMQ高可用+负载均衡集群的安装.配置.高可用测试 准备 正式开始 ActiveMQ ...

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

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

  7. gradlew 命令行 build 调试 构建错误 Manifest merger failed MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  8. centos LB负载均衡集群 三种模式区别 LVS/NAT 配置 LVS/DR 配置 LVS/DR + keepalived配置 nginx ip_hash 实现长连接 LVS是四层LB 注意down掉网卡的方法 nginx效率没有LVS高 ipvsadm命令集 测试LVS方法 第三十三节课

    centos   LB负载均衡集群 三种模式区别 LVS/NAT 配置  LVS/DR 配置  LVS/DR + keepalived配置  nginx ip_hash 实现长连接  LVS是四层LB ...

  9. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

随机推荐

  1. JavaFX入门及相关问题

    下个星期是我们专业的课程设计专周,主要是做一个Java的桌面应用程序,老师上课讲的是用Swing来开发图形化界面,但是听朋友说到一个可视化的图形界面工具JavaFX,本 人愚笨,弄了一天才大致调试完成 ...

  2. Python入门-深入了解数据类型以及方法

    写在开始:每一种数据类型,有对应一种功能,面对不同的问题,使用不同类型. 1.全部数据类型 1.2数值型:解决数字的计算问题 #基础的计算,求除结果,求商,求余数 print(10 / 3) prin ...

  3. OllyDbg---循环、串操作和寻址方式

    循环 字符串指令和寻址方式 循环 XOR ECX,ECX MOV ECX,15H LABEL: DEC ECX CMP ECX,0 JNE LABEL LOOP 重复循环,直到计数器的值为0,每次循环 ...

  4. 第一阶段:Java基础之变量

    1.实例变量 #实例变量只能在类种声明,必须在构造函数.方法.任何块之外 #实例变量只能通过创建对象使用,当使用new创建对象,实例变量也同时被创建,当垃圾回收器回收对象时,实例变量也被销毁 #当在堆 ...

  5. python数据类型内置的方法

    数据类型的内置方法 在日常生活中不同类型的数据具有不同的功能 eg:表格数据文件具有处理表格的各项功能(透视表 图形化 公式计算) 视频数据文件具有快进 加速等各项功能 ... 1.整型int # 方 ...

  6. vue学习day01

    什么是 vue 构建用户界面 用 vue 往 html 页面中填充数据,非常的方便 框架 框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能! 要学习 vue,就是在学习 vue ...

  7. Java语言学习day11--7月10日

    今日内容介绍1.自定义类型的定义及使用2.自定义类的内存图3.ArrayList集合的基本功能4.随机点名器案例及库存案例代码优化 ###01引用数据类型_类 * A: 数据类型 * a: java中 ...

  8. 『忘了再学』Shell基础 — 12、用户自定义变量

    目录 1.变量定义 2.变量调用 3.变量的修改 4.查看变量 (1)-u选项说明: (2)-x选项说明: (3)set命令说明: 5.变量删除 1.变量定义 变量正确定义. 格式:变量名=" ...

  9. Linux ubuntu下docker容器安装和基础命令

    Docker介绍: 云计算就好比大货轮,docker就是集装箱虚拟机虽然可以隔离出很多"子电脑",但占用空间更大,启动更慢,虚拟机软件可能还要花钱(例如VMWare). 而容器技术 ...

  10. python基础-基本数据类型(二)

    一.序列类型 序列类型是用来表示有序的元素集合 1.字符串(str) python中字符串通常用str表示,字符串是使用单引号,双引号,三引号包裹起来的字符的序列,用来表示文本信息. 1.1 字符串的 ...