查看vue项目的构建工具

常见构建工具

vue项目通常会使用以下编译器或构建工具：

• Vite（现代构建工具，速度快）
• Webpack（传统构建工具，功能强大）
• Vue CLI（基于 Webpack 的脚手架）

1.检查 package.json

打开项目根目录下的 package.json 文件，查看 scripts 和 dependencies/devDependencies。

• Vite 项目：
  devDependencies 中会有 vite 和 @vitejs/plugin-vue。
  scripts 中会有 “dev”: “vite” 或 “serve”: “vite”。

• Webpack 项目：
  devDependencies 中会有 webpack、webpack-cli 和 vue-loader。
  scripts 中会有 “serve”: “vue-cli-service serve”（Vue CLI 项目）。

• Vue CLI 项目：
  devDependencies 中会有 @vue/cli-service。
  scripts 中会有 “serve”: “vue-cli-service serve”。

举例

很明显，该项目用到的是vue-cli

2.检查项目根目录文件

• Vite 项目：
  会有 vite.config.js 或 vite.config.ts 文件。
  可能会有 index.html 直接放在根目录（Vite 使用 HTML 作为入口）。

• Webpack 项目：
  会有 webpack.config.js 或 vue.config.js（Vue CLI 项目）。
  Vue CLI 项目会有 babel.config.js。

• Vue CLI 项目：
  会有 vue.config.js 文件（用于自定义 Webpack 配置）。

举例

该项目符合Vue CLI 项目

3. 检查构建输出

运行 npm run build 或 yarn build，观察构建输出：

• Vite：
  构建输出通常更简洁，文件较小。
  输出目录默认是 dist。

• Webpack：
  构建输出可能包含更多文件（如 chunk 文件）。
  输出目录默认是 dist。

• Vue CLI：
  与 Webpack 类似，但可能会有 Vue CLI 特定的优化。

4. 检查开发服务器

运行 npm run dev 或 yarn dev，观察启动日志：

• Vite：
  启动速度非常快，日志中会显示 Vite。
  开发服务器地址通常是 http://localhost:5173。

• Webpack：
  启动速度较慢，日志中会显示 Webpack。
  开发服务器地址通常是 http://localhost:8080。

• Vue CLI：
  启动速度较慢，日志中会显示 Vue CLI。
  开发服务器地址通常是 http://localhost:8080。

5. 检查代码结构

• Vite 项目：
  使用 ES 模块语法（import/export）。
  可能使用 defineComponent 或 < script setup> 语法。

• Webpack 项目：
  可能使用 CommonJS 语法（require/module.exports）。
  可能包含更多配置文件（如 .babelrc）。

• Vue CLI 项目：
  与 Webpack 项目类似，但可能有更多 Vue 特定的优化配置。

6. 使用工具分析

安装 npm-check 或 yarn why 工具，分析项目依赖：

npx npm-check

或

yarn why vite
yarn why webpack