在我们使用vue-cli创建的项目中,默认只有开发development和生产production两种环境变量;但在实际的项目开发过程中往往都会有测试环境,下面就来说一下如何适配测试环境test的环境变量。

1、在项目的config目录下新建test.env.js文件,然后拷贝prod.env.js文件内容到该文件,并修改production为test,代码如下:

2、在项目的build目录下新建webpack.test.conf.js文件,然后拷贝webpack.prod.conf.js文件内容到该文件,并修改引入对应的配置文件为test.env.js,代码如下:

3、在项目的build目录下新建build.test.js文件,然后拷贝build.js文件内容到该文件,并修改引入对应的配置文件为webpack.test.conf.js,代码如下:

4、在package.js文件中添加新的打包命令,代码如下:

5、最后根据不同的环境变量适配axios请求的baseURL,代码如下:

至此,我们在终端命令行分别执行npm run test和npm run build就分别打的测试环境和生产环境的包。

但有一点需要注意:

  在config目录下的index.js文件中,build模块下的属性配置是被test和production共享的,如下build模块:  

  如果要区分配置,可以拷贝整个build模块代码并修改build为test,然后将文件webpack.test.conf.js和build.test.js中“config.build.”的地方都修改为“config.test.”,具体如build.test.js文件中的下述代码:

应用七:Vue之适配test环境变量(2.0版)的更多相关文章

  1. 设置JDK环境变量(linux版)

     设置环境变量一.修改/etc/profile文件当本机仅仅作为开发使用时推荐使用这种方法,因为此种配置时所有用户的shell都有权使用这些环境变量,可能会给系统带来安全性问题.用文本编辑器打开/et ...

  2. Ubuntu 16.04安装JDK并配置环境变量-【小白版】

    系统版本:Ubuntu 16.04 JDK版本:jdk1.8.0_121 1.官网下载JDK文件jdk-8u121-linux-x64.tar.gz 我这里下的是最新版,其他版本也可以 2.创建一个目 ...

  3. classpath环境变量(JDK5.0之后不建议配置)

    classpath的作用: 作用是指定类搜索路径,要使用已经编写好的类,前提当然是能够找到它们了,一旦配置了classpath路径信息的时候,jvm与java编译器都会根据classpath指定的路径 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

    缘起 哈喽大家好,兜兜转转终于来到了Vue实战环节,前边的 6 篇关于Vue基础文章我刚刚简单看了看,感觉写的还是不行呀,不是很系统,所以大家可能看上去比较累,还是得抽时间去润润色,修改修改语句和样式 ...

  5. vue-cli3.0 环境变量与模式

    vue-cli3.0移除了配置文件目录: config和build文件夹.可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢? 为什么需要配置环境变量和模式呢? 所有方法肯定是 ...

  6. mac系统mysql配置环境变量(转)

    mac初次安装mysql,输入mysql -u root -p会出现:zsh: command not found: mysql的提示.此时需要配置环境变量. mac版mysql客户端:mysql-5 ...

  7. uboot环境变量初始化

    一.环境变量概述 1.环境变量的概念 可以理解为用户对软件的全局配置信息,这部分信息应该可以从永久性存储器上读取,能被查询,能被修改. 启动过程中,应该首先把环境变量读取到合适的内存区域,然后利用环境 ...

  8. JAVA虚拟机环境变量设置

    转自: 网络    下载java环境变量设置所需的jdk并安装,下载地址:http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk7 ...

  9. Question20180106 Java环境变量的配置及为什么要配置环境变量

    Question 1  Java环境变量的配置及为什么要配置环境变量 Q1.1为什么要配置环境变量 在学习JAVA的过程中,涉及到多个环境变量(environment variable)的概念,如PA ...

随机推荐

  1. IDEA全局查找快捷键

    双击shift

  2. request.getScheme()、 request.getServerName() 、 request.getServerPort() 、 request.getContextPath()

    <% String basePath = request.getScheme() + "://" + request.getServerName() + ":&qu ...

  3. Python 爬虫的代理 IP 设置方法汇总

    本文转载自:Python 爬虫的代理 IP 设置方法汇总 https://www.makcyun.top/web_scraping_withpython15.html 需要学习的地方:如何在爬虫中使用 ...

  4. cxgrid的过滤%x%问题【备查】

    把这个文件复制到你的程序目录\DevExpress VCL\ExpressDataController\Sources\cxLike.pas function LikeStr(const AStr,  ...

  5. java并发之停止线程

    停止一个线程意味着在任务处理完任务之前停掉正在做的操作,也就是放弃当前的操作.停止一个线程可以用Thread.stop()方法,但最好不要用它.虽然它确实可以停止一个正在运行的线程,但是这个方法是不安 ...

  6. Spring Boot-全局异常处理(八)

    SpringBoot默认异常默认处理机制 Spring boot错误异常时通过BasicErrorController来处理的 通过判断是浏览器请求还是ajax请求响应页面或者json BasicEr ...

  7. hdu 4612 双联通缩点+树形dp

    #pragma comment(linker,"/STACK:102400000,102400000")//总是爆栈加上这个就么么哒了 #include<stdio.h> ...

  8. HDU - 1310 - Digital Roots

    先上题目: Digital Roots Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  9. SQL SERVER高级知识积累

    什么叫做高可用服务器? 高可用服务器简单来理解就是不宕机的服务器 什么叫走服务器的自动化灾备? 自动灾备的意思就是,让从服务器自动变成主服务器 sql server的聚合是什么? 事务会引起性能下降, ...

  10. asp.net--webconfg指南

    原文链接 花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法.很适合新手参看,由于Web.config在使用很灵活,可以自定义一些节点.所以这里只介绍一些比较常用的节点. ...