在正常的开发中,通常我们需要在线上的测试环境中运行代码来检查是否有些线上才会出现的bug或者是问题。每次去特意的修改我们的baseUrl显然是不现实的,而且说不定哪天忘记了估计会被大佬喷死

  首先,这是我们需要动的目录结构:

  VUE2的脚手架已经为我们配置好了开发环境和生产环境,其实测试环境基本上与生产环境并不会相差太远。这就意味着我们可以使用CV大法来完成绝大多数的部分。

  第一步,创建我们的test.env.js(这个名字其实起什么都可以,这样写只是为了以后方便维护)

创建完成后,复制build文件夹下面的webpack.prod.conf.js。创建一个webpack.test.conf.js,并将图中的文件路径改成我们刚刚创建好的test.env.js。

  然后再将我们打包主要的build.js文件复制一下,并进行一些修改

  走到这里,基本上已经完成了一大半了,剩下的只需将vue-cli涉及到 production的部分都进行下判断就可以了。

  1.untils.js文件

  2.webpack.base.conf.js

  3.vue-loader.conf.js文件

  最后,在package.json文件中新增命令,这样就大功告成了!

  现在让我们在项目中调用看看是否发生了改变

Test环境:

正常线上环境:

 

 当然具体的业务实现还是需要看各位的公司需要配置些什么东西,反正我仅设置了axios的baseURL

vue2如何根据不同的环境配置不同的baseUrl的更多相关文章

  1. vue2 + typescript2 项目开发(环境配置)

    Vue 引入 TypeScript vue init airyland/vux2 projectName 增加开发包的依赖 npm install typescript ts-loader --sav ...

  2. vue2.0 + npm + webpack 开发===环境配置

     cnpm安装:npm install -g cnpm --registry=http://registry.npm.taobao.org 1.安装vue-cli脚手架构建工具cnpm install ...

  3. vue中使用axios给生产环境和开发环境配置不同的baseUrl

    第一步:设置不同的接口地址 找到文件:/config/dev.env.js 代码修改为: var merge = require('webpack-merge') var prodEnv = requ ...

  4. vue开发环境配置跨域,一步到位

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...

  5. VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址

    转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...

  6. Node.js与VUE安装及环境配置之Windows篇

    Node.js安装及环境配置之Windows篇 https://www.cnblogs.com/zhouyu2017/p/6485265.html Node.js安装及环境配置之Windows篇htt ...

  7. 总结Vue 第四天:vue-cli(Vue2.0 新手入门 — 从环境搭建到发布)

    总结Vue 第四天:vue-cli(Vue2.0 新手入门 - 从环境搭建到发布) 一.Vue CLI----(Vue2.0 新手入门 - 从环境搭建到发布): ■   CLI是Command-Lin ...

  8. uboot环境配置

    uboot环境配置 通过配置uboot让它在启动过程中从tftp获取内核和设备树,并从在加载内核之后把通过启动参数将"从nfs挂载根文件系统"传入内核.这个配置主要是通过uboot ...

  9. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

随机推荐

  1. LuoguP7043 「MCOI-03」村国 题解

    Content 有 \(T\) 组询问,每组询问给定一个有 \(n\) 个节点的数,编号为 \(1\sim n\),每个节点一开始都有权值 \(a_i\).现有 \(m\) 次操作,每次操作选择树上所 ...

  2. Intellij IDEA添加插件

    1. Lombok插件 IDEA增加对Lombok的支持 <!--lombok插件--> <dependency> <groupId>org.projectlomb ...

  3. C语言获取字符年月日时分秒毫秒

    概述 本文演示环境: Windows10 使用C语言获取年月日时分秒毫秒, 代码 #include <iostream> #include <string> #include ...

  4. nim_duilib(15)之duilib属性列表.xml

    Note 为了更加方便查看duilib的属性(github有时候打不开),特此记录. 阅读本文,可以知道控件有哪些属性,可以写在xml文件中.个别需要结合源码一起看 from here 原文 < ...

  5. Balancing Act(poj1655)

    Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12703   Accepted: 5403 De ...

  6. HDU 4790:Just Random(容斥)

    Just Random Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...

  7. POJ 3126:Prime Path(素数+BFS)

    The ministers of the cabinet were quite upset by the message from the Chief of Security stating that ...

  8. Java 计算加几个月之后的时间

    Java 计算加几个月之后的时间 public static Date getAfterMonth(String inputDate,int number) { Calendar c = Calend ...

  9. 团队编程二——web应用之人事管理系统

    该项目是B-S模式的web应用,以下是团队各成员的Coding链接: ------Aaric---https://coding.net/u/Aaric/p/Personnel_management_s ...

  10. 第48篇-native方法调用解释执行的Java方法

    举一个native方法调用解释执行的Java方法的实例,如下: public class TestJNI { static { System.load("/media/mazhi/sourc ...