vue2如何根据不同的环境配置不同的baseUrl
在正常的开发中,通常我们需要在线上的测试环境中运行代码来检查是否有些线上才会出现的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的更多相关文章
- vue2 + typescript2 项目开发(环境配置)
Vue 引入 TypeScript vue init airyland/vux2 projectName 增加开发包的依赖 npm install typescript ts-loader --sav ...
- vue2.0 + npm + webpack 开发===环境配置
cnpm安装:npm install -g cnpm --registry=http://registry.npm.taobao.org 1.安装vue-cli脚手架构建工具cnpm install ...
- vue中使用axios给生产环境和开发环境配置不同的baseUrl
第一步:设置不同的接口地址 找到文件:/config/dev.env.js 代码修改为: var merge = require('webpack-merge') var prodEnv = requ ...
- vue开发环境配置跨域,一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...
- VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...
- Node.js与VUE安装及环境配置之Windows篇
Node.js安装及环境配置之Windows篇 https://www.cnblogs.com/zhouyu2017/p/6485265.html Node.js安装及环境配置之Windows篇htt ...
- 总结Vue 第四天:vue-cli(Vue2.0 新手入门 — 从环境搭建到发布)
总结Vue 第四天:vue-cli(Vue2.0 新手入门 - 从环境搭建到发布) 一.Vue CLI----(Vue2.0 新手入门 - 从环境搭建到发布): ■ CLI是Command-Lin ...
- uboot环境配置
uboot环境配置 通过配置uboot让它在启动过程中从tftp获取内核和设备树,并从在加载内核之后把通过启动参数将"从nfs挂载根文件系统"传入内核.这个配置主要是通过uboot ...
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
随机推荐
- win10 linux ubuntu子系统 使用adb
条件 本文已经默认你已经在win10系统下成功配置了ubuntu子系统,所以唯一的条件就是windows上的adb 版本和ubuntu子系统的adb版本一致. 方法 怎么来保证adb 版本一致呢?在本 ...
- atexit模块介绍
atexit 模块介绍 python atexit 模块定义了一个 register 函数,用于在 python 解释器中注册一个退出函数,这个函数在解释器正常终止时自动执行,一般用来做一些资源清理的 ...
- restTemplate 接收list数据
User[] users= restTemplate.getForObject(url, User[].class); 使用数组接收
- SpringBoot单元测试demo
引入maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- c++设计模式概述之代理
代码写的不规范,目的是缩短文章篇幅,实际中请不要这样做. 1.模式的结构 代理模式的主要角色如下: A.抽象主题(Subject)类:通过接口或抽象类声明真实主题和代理对象实现的业务方法. B.真实主 ...
- 【九度OJ】题目1176:树查找 解题报告
[九度OJ]题目1176:树查找 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1176 题目描述: 有一棵树,输出某一深度的所有节点 ...
- Harry Potter and the Hide Story(hdu3988)
Harry Potter and the Hide Story Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 ...
- 1632 B君的连通
B国拥有n个城市,其交通系统呈树状结构,即任意两个城市存在且仅存在一条交通线将其连接.A国是B国的敌国企图秘密发射导弹打击B国的交通线,现假设每条交通线都有50%的概率被炸毁,B国希望知道在被炸毁之后 ...
- 从零搭建react hooks项目(github有源代码)
前言 首先这是一个react17的项目,包含项目中常用的路由.状态管理.less及全局变量配置.UI等等一系列的功能,开箱即用,是为了以后启动项目方便,特地做的基础框架,在这里分享出来. 这里写一下背 ...
- 基于 Electron 的 Rubick 2.4k star 啦,同步更新新功能!
为什么要做 Rubick 其实做 Rubick 1.x 的初衷就是解决自己的问题的:特别需要一款支持自定义插件的桌面端应用来简化使用者安装庞大桌面端应用的臃肿.而且涉及到数据安全的问题,插件只能在公司 ...