详解最新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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
js中bool值的转换及“&&”、“||”、 “!!”详解
Dec 21 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
深入浅出学习python装饰器
2017/09/29 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
将python图片转为二进制文本的实例
2019/01/24 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
Python列表list操作相关知识小结
2020/01/29 Python
在线服装零售商:SheIn
2016/07/22 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
房产公证书
2015/01/23 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
美丽心灵观后感
2015/06/01 职场文书
退货证明模板
2015/06/23 职场文书
python 下载文件的几种方式分享
2021/04/07 Python