在正常的开发中,通常我们需要在线上的测试环境中运行代码来检查是否有些线上才会出现的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. Sql Server 索引笔记

    CREATE UNIQUE  CLOSTERED INDEX Idx_phone  ON  teacher (t_phone  DESC)  WITH  FILLFACTOR=30; 如果表中定义了主 ...

  2. java 常用类库:Math:常用min、max;floor;ceil;random;

    Math //7.取整数小于目标的最大整数(Math.floor(1.2));//8.取整数.获取大于目标的最大整数System.out.println(Math.ceil(1.2)); //18.获 ...

  3. AcWing429. 奖学金

    题目: 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金. 期末,每个学生都有3门课的成绩:语文.数学.英语. 先按总分从高到低排序,如果两个同学总分相同,再按语文成绩从 ...

  4. Dockerfile使用OracleJDK创建自定义tomcat8镜像

    我们默认下载的tomcat镜像是用的openjdk ,但是我们有些项目必须使用oraclejdk 那就不能使用官方的tomcat镜像,只能重新自定义一个镜像 Dockerfile文件 FROM cen ...

  5. windows使用natapp教程

    这种免费的 有个缺点 过段时间就会连接不上,需要不定时更换域名地址 Linux系统参考:https://www.cnblogs.com/pxblog/p/10549847.html 官网地址:http ...

  6. JAVA获取昨天、今天、明天等日期

    /** * 获取明天的日期字符串 * @return */ public static String tomorrowDateStr(){ Date date=new Date();//取时间 Cal ...

  7. 【LeetCode】663. Equal Tree Partition 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 日期 题目地址:https://leetcode ...

  8. 【LeetCode】191. Number of 1 Bits 解题报告(Java & Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 右移32次 计算末尾的1的个数 转成二进制统计1的个 ...

  9. 【LeetCode】1019. Next Greater Node In Linked List 解题报告 (Python&C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 单调递减栈 日期 题目地址:https://leetc ...

  10. 设计owllook网络小说推荐系统

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 数据 推荐算法 协同过滤 基于流行度的推荐 基于用户标签相似度的推荐 评价指标 算 ...