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

通过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. 如何基于 ZEGO SDK 实现 Flutter 一对一音视频聊天应用?

    之前的文章发布了ZEGO SDK实现Android端音视频通话应用的开发教程,不少开发者反馈很实用,能不能也出一版Flutter的教程. 有求必应,这不小编来了- 我们封装了ZEGO Flutter ...

  2. 记一次使用git报错,解决Unable to negotiate with **** port 22: no matching host key type found. Their offer: ssh-rsa

    windows电脑重装系统,去官网下载了最新的git安装,一路next下来,打开bash按老路子设置,生成公钥 git config --global user.name "yourname ...

  3. 创建可以运行宿主机GPU的容器

    1.安装NVIDIA Container Runtime apt-get参考https://blog.csdn.net/li_ellin/article/details/107180516 yum参考 ...

  4. Linux下编写和加载 .ko 文件(编写linux驱动)

    一..ko 文件介绍 .ko文件是kernel object文件(内核模块),该文件的意义就是把内核的一些功能移动到内核外边, 需要的时候插入内核,不需要时卸载. 二.优点 (1)这样可以缩小内核体积 ...

  5. 导出带标签的tar包(docker)-解决导出不带标签的麻烦

    需求:在docker的本地镜像库中导出tar包给其他节点使用. 如果使用:docker save -o package.tar e82656a6fc 这样形式导出的tar包,安装之后标签会消失解决办法 ...

  6. 如何在 Java 中实现 Dijkstra 最短路算法

    定义 最短路问题的定义为:设 \(G=(V,E)\) 为连通图,图中各边 \((v_i,v_j)\) 有权 \(l_{ij}\) (\(l_{ij}=\infty\) 表示 \(v_i,v_j\) 间 ...

  7. RPC及Dubbo和ZooKeeper的安装

    RPC及Dubbo和ZooKeeper的安装 RPC 通信有两种方式:HTTP(无状态协议,通信协议),RPC(远程过程调用) 它两的本质没有区别,只是功能有点不一样 官方解释: RPC是指远程过程调 ...

  8. Hyperledger Fabric节点的动态添加和删除

    前言 在Hyperledger Fabric组织的动态添加和删除中,我们已经完成了在运行着的网络中动态添加和删除组织.本文将在其基础上,详细介绍了如何在 soft 组织上添加新的 peer2 节点,并 ...

  9. windwos 下编译 qsqlibase 驱动(firebird 和 interbase)

    编译环境:mingw-w64 使用qtcreator打开ibase.pro,ibase.pro位置例如:R:\qt-everywhere-opensource-src-4.8.5\src\plugin ...

  10. 基于深度学习的人脸性别识别系统(含UI界面,Python代码)

    摘要:人脸性别识别是人脸识别领域的一个热门方向,本文详细介绍基于深度学习的人脸性别识别系统,在介绍算法原理的同时,给出Python的实现代码以及PyQt的UI界面.在界面中可以选择人脸图片.视频进行检 ...