vue webpack实用技巧总结


Posted in Javascript onApril 24, 2018

利用 webpack 给生产环境和发布环境配置不同的接口地址

在开发时,前后端分离同时进行开发。前端调用后端给的接口也是在局域网内部的。但是,当项目推到线上的时候,会从真实服务器上获取接口,在测试接口和真实接口之间频繁切换,让人十分恶心。

第一步,在webpack配置文件中,分别设置不同的接口地址

打开dev.en.js文件。修改如下:

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_ROOT: '"//192.168.1.8/api"' // 添加api地址
})

同样在prod.env.js文件中

module.exports = {
 NODE_ENV: '"production"',
 API_ROOT: '"//www.baidu.com/api"'
}

第二步,在代码中调用设置好的参数

比如我的: src/config/api.js文件

// 原来的API接口地址
var root = 'https://cnodejs.org/api/v1'
// 新配置的API接口地址
var root = process.env.API_ROOT

最后

npm run dev 的时候,跑的就是测试接口。而我们运行

npm run build 打包项目的时候,打包的是服务器正式接口

Javascript 相关文章推荐
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
js中日期的加减法
May 06 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
浅谈vue中.vue文件解析流程
Apr 24 #Javascript
vue-cli2.9.3 详细教程
Apr 23 #Javascript
vue.js数据绑定操作详解
Apr 23 #Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 #jQuery
再谈Angular4 脏值检测(性能优化)
Apr 23 #Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 #Javascript
vue.js中实现登录控制的方法示例
Apr 23 #Javascript
You might like
php UBB 解析实现代码
2011/11/27 PHP
php检测useragent版本示例
2014/03/24 PHP
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
项目合作协议书
2014/09/23 职场文书
永不妥协观后感
2015/06/10 职场文书
服务行业标语口号
2015/12/26 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
vue修饰符.capture和.self的区别
2022/04/22 Vue.js