详解最新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 相关文章推荐
Jquery插件 easyUI属性汇总
Jan 19 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
web打印小结
Jan 11 Javascript
详解node中创建服务进程
May 09 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
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
人族 TERRAN 概述
2020/03/14 星际争霸
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
python实现八大排序算法(2)
2017/09/14 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
python Canny边缘检测算法的实现
2020/04/24 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
python小白学习包管理器pip安装
2020/06/09 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
建设工地安全标语
2014/06/07 职场文书
医德医风自我评价
2014/09/19 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
警示教育观后感
2015/06/17 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis