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 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
js中less常用的方法小结
Aug 09 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 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获取文章上一页与下一页的方法
2014/12/01 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
js控制框架刷新
2008/08/01 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
网络体系结构及协议的定义
2014/03/13 面试题
业务部门经理岗位职责
2014/02/23 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
如何撰写创业策划书
2019/06/27 职场文书