位置: 编程技术 - 正文

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

  • 房屋出租需要交税多少起征
  • 吨位是啥意思
  • 做了进项税转出后要结转么
  • 失业保险费返还后是给单位还是给员工
  • 建筑行业分包款要分项目扣除吗
  • 编制利润表会计等式
  • 分包管理费取费标准
  • 暂估入库冲回的会计分录
  • 使用空头支票被银行冻结
  • 开发成本可以计增值税吗
  • 12月份未计提的费用汇算清缴如何调整?
  • 事业单位跨期发票的财务入账问题
  • 增值税零税率发票开具条件
  • 增值税小规模纳税人的税率
  • 广告业发生错账怎么办
  • 个税房租和房贷抵扣一样吗
  • 企业注销时资本公积怎么处理
  • 保险公司买保险和银行买保险有什么区别
  • 房地产销售广告是要约还是要约邀请?原因是什么?
  • 银行存款利息的计算方法
  • windows 10如何清除联网记录
  • 剑灵怎么双开2023
  • 国企承接政府项目
  • 系统设置自动还原
  • wordpress portfolio
  • mt-mon.exe
  • 新手会计怎么做分录
  • 会计科目的设置应该符合国家统一会计准则的规定
  • framework启动
  • 电子缴款凭证能代替完税证明吗
  • 老生常谈的常是什么意思
  • vue element ui
  • php数据库管理
  • php中定义函数
  • uniapp使用高德地图直接进行导航
  • 蓝桥杯官网报名2020
  • php怎么加css
  • 技术服务费发票图片
  • 债券发行费用包括
  • mongodb win7
  • 小规模纳税人增值税专用发票税率
  • mysql1290报错
  • 递延收益为什么属于负债
  • 农产品开具发票税率是多少?
  • 营改增企业是什么意思
  • 应收账款结算方式有几种
  • 非公司股东可以分红吗
  • 债权投资减值准备是什么科目
  • 电力安装工程合同税率能开13%
  • 开发无形资产的支出
  • 车辆保险费计入现金流量表哪里
  • 公司发放给员工的福利又要回
  • 房地产企业预付账款会计分录
  • 没有发票就不能保修吗
  • 增值税是否计入税金及附加
  • 备查账的登记主要以什么来表述
  • wbs是什么文件
  • 系统安装驱动卡住了
  • win7系统如何安装蓝牙驱动
  • 恢复已删除的聊天记录微信
  • msedge.exe是什么
  • linux虚拟机怎么调出命令行
  • win7开机显示一堆英文
  • linux中sudoers
  • Extjs4 关于Store的一些操作(加载/回调/添加)
  • win7安装要求配置
  • perl中\s+
  • cocos2d开发的知名游戏
  • 如何使用蓝牙耳机
  • jquery 设置css
  • python运算符的用法
  • jquery配合.NET实现点击指定绑定数据并且能够一键下载
  • 对税务稽查工作的意见和建议
  • 深圳国税局官网
  • 江苏电子税务局网站官网
  • 税务局 协查函
  • 山西省税务局官网登录
  • 九江税务总局
  • 忘记了密码怎么打开手机
  • 收缴和缴纳的区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设