详解最新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 相关文章推荐
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
javascript实现获取中文汉字拼音首字母
May 19 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
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
php Calender(日历)代码分享
2014/01/03 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Python3实现二叉树的最大深度
2019/09/30 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
高中军训感言1000字
2014/03/01 职场文书
文明城市标语
2014/06/16 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
校车安全管理责任书
2015/05/11 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
python垃圾回收机制原理分析
2022/04/13 Python