VUE CLI 英文文档

因为 @vue/cli-service 对 webpack 配置进行了抽象，所以理解配置中包含的东西会比较困难，尤其是当你打算自行对其调整的时候。
vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。那个全局的 vue 可执行程序同样提供了 inspect 命令，这个命令只是简单的把 vue-cli-service inspect 代理到了你的项目中。
该命令会将解析出来的 webpack 配置、包括链式访问规则和插件的提示打印到 stdout。

1、导出全部配置

vue inspect > output.js  // 默认mode development
// 默认情况下，inspect命令将显示开发配置的输出。要查看生产配置，您需要运行
vue inspect --mode production > output.prod.js

2、命令行输出一个/多个rule

vue inspect module.rules
vue inspect module.rules.0

image.png

3、命令行输出固定名称（插件/规则）的配置

vue inspect --rule vue
vue inspect --plugin html

4、命令行输出全部插件/规则的配置

vue inspect --rules
vue inspect --plugins

以上实现为VUE CLI4.x版本

5、使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息（包括：development、production）

• 1. --mode 指定环境模式 (默认值：development)
• 2. 运行命令，在终端输出：
     开发环境：npx vue-cli-service inspect --mode development
     生产环境：npx vue-cli-service inspect --mode production
• 3. 运行命令，将输出导入到 js 文件：
     开发环境：npx vue-cli-service inspect --mode development > webpack.config.development.js
     生产环境：npx vue-cli-service inspect --mode production > webpack.config.production.js
• 4. 在产生的 js 文件开头，添加：module.exports =，然后格式化即可查看。
• 5. 官方网址：https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-inspect