vue-cli4 你不一定知道的隐藏检查功能 – vue inspect

作者: tww844475003 分类: 前端开发 发布时间: 2021-05-22 16:15

不生成 index

当基于已有的后端使用 Vue CLI 时,你可能不需要生成 index.html,这样生成的资源可以用于一个服务端渲染的页面。这时可以向 vue.config.js 加入下列代码:

module.exports = {
  // 去掉文件名中的 hash
  filenameHashing: false,
  // 删除 HTML 相关的 webpack 插件
  chainWebpack: config => {
    config.plugins.delete('html')
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  }
}

我们知道vue-cli4这个脚手架非常适用初级开发者,几乎可以零配置搭建自己的项目,不像以前搭建自己的项目需要在webpack中配置各种loader,plugins。那是不是webpack打包不需要配置loader了,其实不是,那是vue-cli脚手架帮我们做默认配置。那我们如何去查看脚手架到底背着我们做了些什么:

任务项目都离不开静态资源,图片,vue-cli4其实也帮我们做了处理,file-loader 用版本哈希值和正确的公共基础路径来决定最终的文件路径,再用 url-loader 将小于 4kb 的资源内联,以减少 HTTP 请求的数量。
如果我们想放大这个4kb的限制,我们可以通过 chainWebpack 调整内联文件的大小限制。例如,下列代码会将其限制设置为 10kb:

module.exports = {
  chainWebpack:config => {
    config.module
      .rule('images')
        .use('url-loader')
          .loader('url-loader')
          .tap(options => Object.assign(options, { limit: 10240 }))
  }
}

vue-cli4到底有多少默认配置我们是不知道的了,我们应该如何去得知了,除了官方文档,我们是不是有更加便捷的方法可以得知,今天教给大家一个小技巧,其实脚手架有专门的命令可以看:

列出所有规则和插件的名字:

vue inspect –rules

vue inspect –plugins

这是查看全部规则和插件列表,当然也可以查看单个规则和插件的具体参数配置

vue inspect –rule vuevue inspect –rule html

有图有真相,下面我们来看看,之前修改了url-loader 小于4KB就内联的值,改成的10KB,到底能不能通过这个命令查出来,答案是肯定的,请看:

vue inspect –rule images

前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注