在webpack搭建的vue项目中如何管理好后台接口地址
在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包,来回很是麻烦,今天网上翻看到一个很好的方法可以解决这个问题,也是由于对webpack工具不是很了解,其实这个工具已经提供了解决方案.
参考网站:http://blog.csdn.net/gebitan505/article/details/58166055;
在config文件夹里面有三个js文件,分别是dev.env.js,index.js和prod.env.js,分别代表了测试环境的配置信息,主要的配置信息,生产环境的配置信息.
打开dev.env.js文件;在NODE_ENV
下面增加一项,代码如下:
var merge = require('webpack-merge')
var prodEnv = require('./prod.env') module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"//192.168.1.8/api"'//测试环境的接口
})
然后,在编辑prod.env.js
文件,代码如下
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"//www.baidu.com/api"'//生产环境的接口
}
最后将设置的root url改成:process.env.API_ROOT,
例如将let rootUrl = "http://test.api.com"改为let rootUrl = process.env.API_ROOT;
webpack在本地测试的时候使用的是测试接口,打包的时候会自动将接口替换为生产环境的接口;很方便
在webpack搭建的vue项目中如何管理好后台接口地址的更多相关文章
- <转载> VUE项目中CSS管理
vue的scoped 在vue项目中,当 .vue文件中 <style> 标签有 *scoped 属性时,它的 CSS 只作用于当前组件中的元素,很好的实现了样式私有化的目的. 使用sco ...
- vue-cli3搭建的vue项目中使用jquery
装包:npm install jquery --save 方式一 全局使用 1)main.js中引入 // jquery import $ from 'jquery' Vue.prototype.$ ...
- vue项目中Webpack-dev-server的proxy用法
问题:在VUE项目中,需要请求后台接口获取数据,这时往往会出现跨域问题 解决方法:在vue.config.js中devServer配置proxy 常用的场景 1. 请求/api/XXX现在都会代理到请 ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- 在使用vue+webpack模版创建的项目中使用font-awesome
前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...
- 如何搭建一个VUE项目
搭建环境 搭建node环境 下载 1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当前版本为8.9.4,下载网址为:https://nodejs.org/zh-cn/downl ...
- vue-用Vue-cli从零开始搭建一个Vue项目
Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...
- Vue项目中使用vw实现移动端适配
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
- 搭建一个VUE项目
搭建环境 搭建node环境 下载 1.进入node.js官方网站下载页,点击下图中框出位置,进行下载即可,当前版本为8.9.4,下载网址为:https://nodejs.org/zh-cn/downl ...
随机推荐
- The Preliminary Contest for ICPC Asia Nanchang 2019 E. Magic Master
题目:https://nanti.jisuanke.com/t/41352 思路:约瑟夫环 由题意得第k张牌即求 k 为 第几个 报数为m+1 的单位 用队列模拟即可 #include<bits ...
- 【银川网络赛G】Factories
题目大意:给定一棵 N 个节点的树,边有边权,选定 M 个叶子节点,使得任意两个叶子节点的树上距离之和最小,求最小值是多少. 题解:任意两点的树上距离和问题应从边的贡献角度考虑. 设 \(f[u][i ...
- NFS的搭建
NFS是Network File System的简写,即网络文件系统. 网络文件系统是FreeBSD支持的文件系统中的一种,也被称为NFS. NFS允许一个系统在网络上与他人共享目录和文件.通过使用N ...
- Centos 7误删Yum,如何补救???
1. 查看centos 的版本号 cat /etc/redhat-release 2. 进入阿里云源站地址:http://mirrors.aliyun.com/ 找到对应的版本号 3.下载相应的yu ...
- vue 项目, 通知子组件更新,父组件中每次点击按钮重新加载子组件,(重新生成dom 元素)
vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...
- C# 3.0
序言 自动实现的属性 匿名类型 查询表达式 Lambda 表达式 从 C# 3 开始,lambda 表达式提供了一种更简洁和富有表现力的方式来创建匿名函数. 使用 => 运算符构造 lambda ...
- 【PKUSC2019】树染色【线段树合并】【树形DP】
Description 给出一棵n个点的树,现在有m种颜色,要给每个节点染色,相邻节点不能同色. 另外有k条限制,形如x号点不能为颜色y 同一节点有可能有多条限制. 求方案数对998244353取模的 ...
- python3 类的属性、方法、封装、继承及小实例
Python 类 Python中的类提供了面向对象编程的所有基本功能:类的继承机制允许多个基类,派生类可以覆盖基类中的任何方法,方法中可以调用基类中的同名方法. 对象可以包含任意数量和类型的数据. p ...
- ES6迭代器和生成器
一.迭代器 JavaScript 原有的表示"集合"的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set.这样就需要一种统一的接口机制,来处理 ...
- MySQL学习笔记(cmd模式下的操作)
1.登入MySQL 1.1 登入MySQL 1.1.1命令如下: C:\Users\zjw>mysql -hlocalhost -uroot -p Enter password: ****** ...