详解最新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 相关文章推荐
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
JavaScript创建表格的方法
Apr 13 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
php模板之Phpbean的目录结构
2008/01/10 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
Vue函数式组件的应用实例详解
2019/08/30 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
python如何将图片转换为字符图片
2020/08/19 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
优秀通讯员事迹材料
2014/01/28 职场文书
感恩之星事迹材料
2014/05/03 职场文书
优秀班组长事迹
2014/05/31 职场文书
个人委托书怎么写
2014/09/17 职场文书
财务审计整改报告
2014/11/06 职场文书
史上最牛的辞职信
2015/02/28 职场文书
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang