位置: 编程技术 - 正文

详解vue-cli脚手架build目录中的dev-server.js配置文件(vuecli脚手架是干什么的)

编辑:rootadmin

推荐整理分享详解vue-cli脚手架build目录中的dev-server.js配置文件(vuecli脚手架是干什么的),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue cli脚手架命令,vue-cli脚手架,vue-cli脚手架,vuecli脚手架是干什么的,vue cli3脚手架详解,vue-cli脚手架,vue cli3脚手架详解,vue-cli脚手架,内容如对您有帮助,希望把文章链接给更多的朋友!

本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件

1.这个配置文件是命令npm run dev 和 npm run start 的入口配置文件,主要用于开发环境

2.由于这是一个系统的配置文件,将涉及很多的模块和插件,所以这部分内容我将分多个文章讲解,请关注我博客的其他文章

3.关于注释 &#;当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看

4.上代码

解释

(1)webpack-dev-middleware插件

这个插件只能用于开发环境,下面是这个插件的解释

这是一个简洁的webpack包装中间件,这个插件做这个主要为文件做一件事情,就是当文件修改后提交到webpack服务器,然后处理这些修改后的文件

这个插件有一下几个优点

第一,所有的文件都是写在disk上,文件的处理在内存中进行

第二,如果文件在watch模式下被改动,这个中间件将不会为这些老的bundle服务了,如果这些老的bundle上有文件改动, 这个中间件将不会发送请求,而是等到当前编译结束,当前最新的文件有改动,才会发送请求,所以你不需要手动刷新了

第三,我会在以后的版本中优化

详解vue-cli脚手架build目录中的dev-server.js配置文件(vuecli脚手架是干什么的)

总结,这个中间件是webpack-dev-server的核心,实现修改文件,webapack自动刷新的功能

安装 npm install webpack-deb-middleware --save-dev

使用方法如下,下面的使用方法也是webpack-dev-server实现的代码

app.use是express的方法,用来设置静态路径

上面的obj1是webpack配置对象,使用webpack方法转换成compiler编译对象,obj2配置的是更新文件打包后的配置,使用

webpackMiddleware处理之后,就返回一个静态路径,方便获取文件关于obj2的配置项,可以自行查阅,必须要添加publicPath

说到这里,我就不卖关子了,简言之我们的静态服务器是node.js,现在文件修改了,webpack-dev-middleware将修改的文件编译后,告诉nodejs服务器哪些文件修改了并且把最新的文件上传到静态服务器,够清楚了吧

(2)webpack-hot-middleware插件

这个插件是用来将webpack-dev-middleware编译更新后的文件通知浏览器,并且告诉浏览器如何更新文件,从而实现 Webpack hot reloading

将这两个插件配合起来使用你就可以不需要webpack-dev-sever,即可以自己实现hot-replacement热替换功能,webpack-hot-middleware插件通知浏览器更新文件大致是通过一个json对象实现的,具体实现机制这里不多说了,下面来看具体用法

安装 npm install webpack-hot-middleware --save-dev

在使用了webpack-dev-middleware之后,在添加如下代码即可

(3)connect-history-api-fallback插件

因为在开发单页面应用时,总的来说项目就一个页面,如果通过点击刷新按钮并且此时链接指的不是主页的地址,就会;或者我通过其他的链接比如 /login.html 但是并没有login.html就会报错,而这个插件的作用就是当有不正当的操作导致的情况,就把页面定位到默认的index.html使用起来也比较简单,记住这样用就可以了

安装 npm install --save connect-history-api-fallback

使用

标签: vuecli脚手架是干什么的

本文链接地址:https://www.jiuchutong.com/biancheng/378891.html 转载请保留说明!

上一篇:浅谈vue-cli加载不到dev-server.js的解决办法(vue@cli)

下一篇:AngularJs 最新验证手机号码的实例,成功测试通过(angularjs2)

  • 公司房产税怎么做分录
  • 公司和劳务公司合作工资代发
  • 收到货款发货了没开发票怎么入账
  • 发票作废了清单一样怎么重新使用
  • 经营性收入包括投资收益吗
  • 本期实际缴费金额指的是什么
  • 房地产企业土地使用税
  • 进口货物的代理报关服务费计入
  • 会计科目应收账款什么意思
  • 营改增后取得施工作业收入需要交哪些税?
  • 营业外支出税前扣除比例是多少
  • 企业劳务发票怎么开,税率是多少
  • 一般纳税人证明在哪里打印
  • 二手房有不动产统一发票吗
  • 免抵退税额抵减额是什么意思
  • 技术维护费属于劳务还是研发和技术服务
  • 个人税务代人开普票
  • 食堂费用计入应付职工薪酬吗
  • 小规模纳税人少计提的工资怎么办
  • 金蝶财务软件录入凭证
  • 工程发票需要进项吗
  • 中央下拨党费
  • 小企业存货有哪些
  • 房地产公司简易计税增值税
  • 小规模纳税人一个月能开多少税票
  • 年终股东利润分配方案
  • 以前年度多计提的附加税怎么调账
  • 0xc000007b应用程序无法正常启动win11
  • 销售折扣的会计分录处理
  • 工程结算书和竣工结算书
  • netsurf.exe - netsurf是什么进程 有什么用
  • 佛罗里达naples
  • 铡刀演示
  • iconfont原理
  • php实现当前页面的快捷键
  • 未确认融资费用怎么算
  • 金税盘开票系统复核人员设置在哪里
  • 前端面试题目100及最佳答案
  • dedecmsv6插件不能用
  • 扶贫款分红怎么做账
  • 股东入股资金如何记账
  • 往期企业所得税报表更正
  • 企业借款利息计入什么科目
  • 建筑安装增值税纳税地点
  • 员工意外伤害保险最多赔多少
  • 培训学校的主营业务是什么
  • 去年应收账款下账错误怎么调整
  • 企业注销时应收帐款如何处理
  • 新公司期初余额怎么算
  • 销售不动产计税税率
  • 专用发票怎么网上申领
  • 税金及附加科目余额在借方还是贷方
  • win预览版计划
  • Linux系统怎么调整屏幕亮度
  • fedora os
  • freebsd怎么安装
  • windows终端美化
  • ubuntu查看内存占用最多的进程ID
  • macbook pro怎么分区
  • 怎么添加第二个人脸识别
  • win7计算机怎么设置开机密码
  • WIN10系统中WPS字体颜色浅
  • linux系列
  • win7网页有错误如何修复?
  • win8系统安装的软件在哪里
  • 游戏unity报错
  • 安卓影音播放软件
  • js中的冒泡排序原理
  • express常用中间件
  • js判断元素是否显示
  • js 字符编码
  • python怎么多进程
  • javascript nextSibling 与 getNextElement(node) 使用介绍
  • jquery的fadein
  • python socket模块
  • 北京电子税务
  • 契税减免优惠政策2023年最新
  • 国地税联合办公
  • 黄石市地方税务局人工客服电话
  • 贵阳地铁报销凭证
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设