位置: 编程技术 - 正文

详解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)

  • 独资企业赚的钱全是老板的吗
  • 教培行业提成一般多少
  • 计提工资是计提哪个月的
  • 经营活动现金流增加的原因
  • 两处以上取得工资如何交社保
  • 公司注销时有大额应付款如何做账务处理合适?
  • 以前年度社保计提出错了怎么调整
  • 上年度没有计提企业所得税
  • 发票失控成本怎么处理
  • 房屋及建筑物原值计算
  • 货物已经入库,发票没有收到记账
  • 股权转让资本公积怎么处理
  • 个人投资借款长期不还要缴纳个人所得税吗?
  • 投资款怎样缴印花税?
  • 工会经费计税依据是应发工资还是实发工资
  • 税收滞纳金和税金滞纳金有什么区别
  • 建筑机械租赁站
  • 纳税人备案信息包括
  • 专票丢了可以拿复印件在所得税前列支吗
  • 国外进口的食品还能吃吗
  • 海关进口增值税和关税怎么入账
  • qq助手有什么用处
  • linux强制删除文件夹
  • 免费样品销售给客户怎么入账
  • word基本怎么使用
  • win10平板模式怎么改回来
  • 扶贫入股分红政策
  • 暂估入账收入会计分录
  • 电脑麦克风没声音是什么原因
  • php和ajax
  • 事业单位财政专项资金可以用于职工社保
  • 发票已开,款未到的会计分录
  • 公司汽车折旧计算方法用那种
  • php短网址生成算法
  • 机器学习分类算法之XGBoost(集成学习算法)
  • php 截取字符
  • handsome主题破解
  • 逆回购要手续费吗
  • 出口没有增值税发票需要交税吗
  • 原始凭证在账务处理程序中的作用
  • 建筑业外管证预审要多久
  • 汇算清缴思路
  • 计提固定资产折旧借方科目包括
  • show processlist
  • 应收账款调增调减?
  • 营改增土地出让金抵减销售额如何做账及申报纳税的...
  • 增资如何做账务处理
  • 小规模免税如何开票
  • 工程项目立项前的安全评估
  • 期初建账明细账怎么建账
  • 生育保险基金的筹集原则是
  • 开办费列支范围
  • 发现以前年度增值税附表2填写错了那时增值税是0
  • 广告赞助的形式
  • 关联企业有什么好处
  • mysql中增删改查语句
  • bios开机密码怎么关闭
  • Win10预览版怎么变回正式版
  • ghost过的硬盘能恢复吗
  • ubuntu20.10安装教程
  • linux 常用 命令
  • 如何卸载windows media player
  • win1020h2版本是正式版吗
  • ie运行flash
  • win10 预览版 移除 tab 栏 特性
  • linux cut-c
  • opengles和vulkan哪个好
  • nodejs 代码加密
  • python 字典怎么用
  • Android Build.prop
  • JavaScript数据类的特点
  • Python文本相似性计算之编辑距离详解
  • 安卓点赞脚本
  • 青海国税发票查询系统
  • 医保可以直接到税局买吗?
  • 税务网上申报怎样操作
  • 如何当好一名税务局长
  • 广东税务app下载安装
  • 购置税缴费方式
  • 如何在个税app中设置企业登录密码
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设