在正常的开发中,通常我们需要在线上的测试环境中运行代码来检查是否有些线上才会出现的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. 【大咖直播】Elastic 企业搜索实战工作坊(第二期)

    借助 App Search 提供的内置功能,您可轻松打造卓越的搜索体验.直观的相关度调整以及开箱即用的搜索分析,不仅可以优化所提供的内容,其提供的 API 还可帮助您将位于各处的所有内容源关联在一起. ...

  2. WebRTC音频通话升级为视频通话

    我们有时候在音频通话过程中,想要改成视频通话.如果挂断当前通话再重新发起视频通话就会显得比较麻烦. 因此很多app提供了将音频通话升级成视频通话的功能,同时也有将视频通话降为音频通话的功能. 本文演示 ...

  3. JAVA判断某个元素是否在某个数组中

    先把数组转为list 然后再利用contains方法 String[] strArr = new String[] { "a1", "b1", "c1 ...

  4. P1599 货币

    背景 又是一道水题 描述 在某个神秘的星球上有一种货币,它有一种奇怪的兑换规则 你有且仅有一枚面值为n的金币,你可以去银行进行兑换,也可以不兑换 如果去银行兑换,兑换的规则是这样的:用面值为a的金币去 ...

  5. Vue总结第六天:Vuex (全局变量管理~多个页面共享数据)

    Vue总结第六天:Vuex (全局变量管理~多个页面共享数据) 目录 一.Vuex (全局变量管理~~多个页面共享数据) ✿ 更详细的可以看官网:开始 | Vuex 1.什么是Vuex? 2.核心概念 ...

  6. 如何把 MySQL 备份验证性能提升 10 倍

    JuiceFS 非常适合用来做 MySQL 物理备份,具体使用参考我们的官方文档.最近有个客户在测试时反馈,备份验证的数据准备(xtrabackup --prepare)过程非常慢.我们借助 Juic ...

  7. Generating Adversarial Examples with Adversarial Networks

    目录 概 主要内容 black-box 拓展 Xiao C, Li B, Zhu J, et al. Generating Adversarial Examples with Adversarial ...

  8. 如何优雅地读写HttpServletRequest和HttpServletResponse的请求体

    最近很多交互要同原生的HttpServletRequest和HttpServletResponse打交道.从HttpServletRequest中读取body数据封装成某种数据结构:向HttpServ ...

  9. JavaScript实现简单的打字游戏

    完整项目下载:https://download.csdn.net/download/weixin_44893902/13131694 演示地址:https://url_777.gitee.io/typ ...

  10. 使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表

    查看本章节 查看作业目录 需求说明: 在页面上输出九九乘法表,实现效果如图所示 实现思路: 创建HTML页面 在页面中嵌入 <script type="text/javascript& ...