最近vue-cli更新,用其构建项目的时候,发现bulid文件下少了两个文件,分别是dev-sever.js和dev-client.js
vue-cli 2.8
vue-cli 2.9.1
这是为什么呢
我们查看下package.json
vue-cli 2.8
vue-cli 2.9.1
由此可知 在最新版本的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
对比下就知道 当我们运行npm run dev 实际上是执行了webpack-dev-server –inline –progress –config build/webpack.dev.conf.js
vue-cli 2.8 package.json
跟之前运行npm run dev 有区别 也好说明了他要删除这两个文件的原因了,因为最新版本的webpack的配置中是采用webpack-dev-server这个插件进行的启动浏览器的 可以在官网进行查看他的一个API使用说明
build/webpack.dev.conf.js 运行路径 那查看下其配置
vue-cli 2.9.1 build/webpack.dev.conf.js
查看API就知道这个open 这个参数就是打开自启服务器的原因,但是config.dev.autoOpenBrowser这个是什么呢,我们可以向上查找
刚好对应config的定义 require就是加载进来 那就是继续查看对应的路径 刚好对应config文件下的index.js 在require默认是其下的index文件 这里就对应index.js
config/index.js
这里的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之前版本是在dev-server.js直接设置的 具体参数在
vue-cli 2.9.1
方法一:
回到起点,在最新版本vue-cli的配置中浏览器服务都在webpack-dev-server 这个插件中,那我们就其在webpack.dev.conf.js进行修改
现在我们的要求就是怎么在服务开启的时候接口数据也对应做好呢,那我们查看其插件API 刚好有一个参数就是devServer.before
devServer.before
就是解决问题所在了。 进行修改
webpack.dev.conf.js
这样我们就可以直接发送API请求数据了
this.axios.get("/api/seller").then(function(res){ // do something })
方法二
会node的也可以直接做个api接口,开启node服务 然后饿了吗项目直接访问这个接口,当然这里会存在跨域问题和路由映射,不过webpack-dev-server 帮你们解决这个问题了 主要是设置参数问题 devServer.proxy 进行路由映射等等
不过这些还需要考虑到自身能力,我建议还是使用第一种方法
总结
前端技术更新那么快,我们最好就是每天都要学习想对应的知识,主要是底层能理解透彻了 这些问题我们就可以对应解决
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 【原神】V5.1攻略 | 纳西妲一图流攻略
- 群星.2003-重遇80·感动今天的都市人2CD【SONY】【WAV+CUE】
- 希文.2024-沉溺【StreetVoice】【FLAC分轨】
- 韩红.2005-精丫麒麟童】【WAV+CUE】
- 2D像素风日式美学动作游戏《雨魂》将登陆Xbox Series
- 《龙腾世纪4》评分造假?仅将评测代码给好评媒体!
- 《怪猎荒野》推出蜘蛛恐惧症设定 蜘蛛秒变史莱姆
- 《张韶涵单8CD+无损单曲合集》[WAV/FLAC][6.5G]
- 自然声带《大自然 雨声 白噪音》[320K/MP3][135.32MB]
- 自然声带《大自然 雨声 白噪音》[FLAC/分轨][416.27MB]
- 2024年度计划曝光!《暗黑破坏神:不朽》X《魔兽世界》11月开启联动
- 逆流而上!成都Wolves后发制人韧性十足!——《第五人格》2024秋季赛第四周赛报
- 复归之刻,七烛庆典,狼人杀七周年掌门表演赛活动来袭!
- 炉石传说野兽流最终阵容推荐 酒馆战棋野兽流最终阵容图文一览
- 炉石传说野猪人流最终阵容推荐 酒馆战棋野猪人流最终阵容图文一览