详解最新vue-cli 2.9.1的webpack存在问题


Posted in Javascript onDecember 16, 2017

最近vue-cli更新,用其构建项目的时候,发现bulid文件下少了两个文件,分别是dev-sever.js和dev-client.js

vue-cli 2.8

详解最新vue-cli 2.9.1的webpack存在问题

vue-cli 2.9.1

详解最新vue-cli 2.9.1的webpack存在问题

这是为什么呢

我们查看下package.json

vue-cli 2.8

详解最新vue-cli 2.9.1的webpack存在问题

vue-cli 2.9.1

详解最新vue-cli 2.9.1的webpack存在问题

由此可知 在最新版本的vue-cli中webpack版本更新到v3.6.0了。

既然更新了 那就我们就重新开下webpack的配置项。

vue自启浏览器设置

当我们启动npm run dev执行此cli的时候发现 居然不会自己启动浏览器了

这样的话 岂不是装逼不了? 不不不 还是可以的,只要我们修改下配置项就可以了

我们先看看 我们npm run dev 到底执行了什么

继续查看package.json的scripts选项的dev 配置

vue-cli 2.9.1 package.json

详解最新vue-cli 2.9.1的webpack存在问题

对比下就知道 当我们运行npm run dev 实际上是执行了webpack-dev-server ?inline ?progress ?config build/webpack.dev.conf.js

vue-cli 2.8 package.json

详解最新vue-cli 2.9.1的webpack存在问题

跟之前运行npm run dev 有区别 也好说明了他要删除这两个文件的原因了,因为最新版本的webpack的配置中是采用webpack-dev-server这个插件进行的启动浏览器的 可以在官网进行查看他的一个API使用说明

build/webpack.dev.conf.js 运行路径 那查看下其配置

vue-cli 2.9.1 build/webpack.dev.conf.js

详解最新vue-cli 2.9.1的webpack存在问题

查看API就知道这个open 这个参数就是打开自启服务器的原因,但是config.dev.autoOpenBrowser这个是什么呢,我们可以向上查找

详解最新vue-cli 2.9.1的webpack存在问题

刚好对应config的定义 require就是加载进来 那就是继续查看对应的路径 刚好对应config文件下的index.js 在require默认是其下的index文件 这里就对应index.js

config/index.js

详解最新vue-cli 2.9.1的webpack存在问题

这里的autoOpenBrowser对应false ,既然我们要改动那就直接改为true就可以。然后在重启下服务 就可以自启动服务了

其中的port也可以改对应的启动端口,在最新版本的vue-cli配置中 即使设置的端口被占用了,他自动会在其端口在加1 开启服务的。

饿了吗APP 接口设置问题

由于bulid文件夹下的两个文件没有,那饿了吗接口怎么设置呢。

在此之前我们理解下饿了吗app的接口的设置原理,由于数据都是直接从data.json这个文件获取的,所以呢,我们要模拟mock做个接口。但是在饿了吗APP的设置中 它是直接启动服务的时候把接口给做好了,这也是为什么我们可以直接访问其/api/seller有对应数据

vue-cli 2.9.1

详解最新vue-cli 2.9.1的webpack存在问题

在vue-cli 2.9.1之前版本是在dev-server.js直接设置的 具体参数在

vue-cli 2.9.1

详解最新vue-cli 2.9.1的webpack存在问题

方法一:

回到起点,在最新版本vue-cli的配置中浏览器服务都在webpack-dev-server 这个插件中,那我们就其在webpack.dev.conf.js进行修改

现在我们的要求就是怎么在服务开启的时候接口数据也对应做好呢,那我们查看其插件API 刚好有一个参数就是devServer.before

devServer.before

详解最新vue-cli 2.9.1的webpack存在问题

就是解决问题所在了。 进行修改

webpack.dev.conf.js

详解最新vue-cli 2.9.1的webpack存在问题

这样我们就可以直接发送API请求数据了

this.axios.get("/api/seller").then(function(res){
 // do something
})

方法二

会node的也可以直接做个api接口,开启node服务 然后饿了吗项目直接访问这个接口,当然这里会存在跨域问题和路由映射,不过webpack-dev-server 帮你们解决这个问题了 主要是设置参数问题 devServer.proxy 进行路由映射等等

详解最新vue-cli 2.9.1的webpack存在问题

不过这些还需要考虑到自身能力,我建议还是使用第一种方法

总结

前端技术更新那么快,我们最好就是每天都要学习想对应的知识,主要是底层能理解透彻了 这些问题我们就可以对应解决

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
JavaScript类库D
Oct 24 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
layui的table中显示图片方法
Aug 17 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
教你一步步实现一个简易promise
Nov 02 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 #jQuery
详解如何使用 vue-cli 开发多页应用
Dec 16 #Javascript
详解VUE 数组更新
Dec 16 #Javascript
详解如何用模块化的方式写vuejs
Dec 16 #Javascript
浅谈 Vue 项目优化的方法
Dec 16 #Javascript
在vue-cli中组件通信的方法
Dec 16 #Javascript
动手写一个angular版本的Message组件的方法
Dec 16 #Javascript
You might like
PHP实现的简单mock json脚本分享
2015/02/10 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
Python采集腾讯新闻实例
2014/07/10 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
python 调试冷知识(小结)
2019/11/11 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
护理专业自我鉴定
2014/01/30 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
法人代表证明书格式
2014/10/01 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
商务司机岗位职责
2015/04/10 职场文书
实习报告怎么写
2019/06/20 职场文书