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

不生成 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