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环境配置有很多坑要跳,为了帮助新手快速无误的 ...
随机推荐
- Docker从入门到精通(七)——容器数据共享
什么是容器数据共享?简单来说就是容器与容器之间数据共享,容器与宿主机数据共享. 1.为什么需要数据共享? ①.数据持久化 比如我们有一个MySQL集群,通过容器启动,那么项目运行过程中的数据是保存在容 ...
- LuoguP4263 [Code+#3]投票统计 题解
Content 有 \(t\) 组询问,每组询问给定一个长度为 \(n\) 的数列,请将出现次数最多的数按照从小到大的顺序输出,或者这些数在数列中出现的次数都相等. 数据范围:\(t\) 未知,\(n ...
- java 输入输出IO流:标准输入/输出System.in;System.out;System.err;【重定向输入System.setIn(FileinputStream);输出System.setOut(printStream);】
Java的标准输入输出分别通过System.in和System.out来代表的,在默认情况下它分别代表键盘和显示器,当程序通过System.in来获取输入时,实际上是从键盘读取输入 当程序试图通过 S ...
- VUE3 之 样式绑定
1. 概述 老话说的好:脚踏实地,从小事做起. 言归正传,今天我们来聊聊 VUE3 的样式绑定. 2. 样式绑定 2.1 样式例子 <style> /* 颜色 */ .color-red ...
- ajaxFileUpload上传文件成功后却无法解析服务器返回的json数据
可能是应该返回内容带了标签,过滤下 var index=data.indexOf("<"); if (index!=-1){ data=data.substring(0,in ...
- IDEA微服务项目SpringBoot一键(批量)顺序启动
找到 搜索 RunDashboard <option name="configurationTypes"> <set> <option value=& ...
- 查找MySql的配置文件my.cnf所在路径
Linux系统 linux 上可以使用 mysql --help|grep my.cnf 过滤查看 [root@localhost etc]# mysql --help|grep my.cnf ord ...
- AQS的原理及源码分析
AQS是什么 AQS= volatile修饰的state变量(同步状态) +FIFO队列(CLH改善版的虚拟双向队列,用于阻塞等待唤醒机制) 队列里维护的Node节点主要包含:等待状态waitStat ...
- 【LeetCode】624. Maximum Distance in Arrays 解题报告(C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 大根堆+小根堆 保存已有的最大最小 日期 题目地址:h ...
- 【九度OJ】题目1124:Digital Roots 解题报告
[九度OJ]题目1124:Digital Roots 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1124 题目描述: T ...