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 dom 操作详解 js加强
Jul 13 Javascript
JavaScript中操作字符串小结
May 04 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 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 判断变量类型实现代码
2009/10/23 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
php变量作用域的深入解析
2013/06/03 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
python支持多继承吗
2020/06/19 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
业务代表的岗位职责
2013/11/16 职场文书
自荐信写法介绍
2014/01/25 职场文书
文案策划求职信
2014/04/14 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
Golang 并发下的问题定位及解决方案
2022/03/16 Golang