1 build
B站有完整的前端后端源码解析视频课程
你完全可以不使用这个 build/index.js 脚本，直接用 Vue CLI 自带的 npm run build 命令进行打包，两者的核心打包逻辑完全一致，最终生成的 dist 目录内容也完全相同。
为什么可以不使用这个脚本？
因为这个 build/index.js 本质上是对 Vue CLI 原生打包命令的「封装和扩展」，而非“必须依赖的打包工具”：
- 脚本中最核心的打包逻辑是
run('vue-cli-service build')，这和npm run build底层执行的命令完全一样（Vue CLI 项目中，package.json的build脚本默认就是"vue-cli-service build"）； - 它的额外功能（如
--preview预览、--report生成报告）只是“锦上添花”，而非打包的必要步骤。
两种打包方式的对比（选哪种都可以）
| 打包方式 | 命令 | 效果 | 适用场景 |
|---|---|---|---|
| 原生方式 | npm run build | 仅执行打包，生成 dist 目录 | 只需要打包结果，不需要预览 |
| 脚本方式 | node build/index.js 或 node build/index.js --preview | 执行打包 + 可选预览/生成报告 | 需要打包后快速预览，或分析打包体积 |
总结
- 完全可以不用：直接用
npm run build就能完成打包，这是 Vue CLI 推荐的标准方式，简单直接； - 脚本是可选工具：它的存在只是为了提供“打包+预览”的一站式体验，如果你不需要这个功能，忽略它即可，对项目没有任何影响。
选择哪种方式，完全取决于你的开发习惯——想用原生命令就用 npm run build，想方便预览就用脚本，两者最终的打包结果完全一致。
// 导入runjs工具的run函数，用于执行终端命令
const { run } = require('runjs')
// 导入chalk工具，用于在终端输出带颜色的文字
const chalk = require('chalk')
// 导入vue项目的配置文件，用于获取项目的基础路径配置
const config = require('../vue.config.js')
// 获取命令行参数（去掉前两个默认参数：node和当前文件路径）
const rawArgv = process.argv.slice(2)
// 将命令行参数拼接成字符串，方便后续传递给打包命令
const args = rawArgv.join(' ')
// 判断是否需要执行"打包并预览"功能：
// 1. 检查是否有npm_config_preview环境变量（通过npm run命令传递）
// 2. 检查命令行参数中是否包含--preview
if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
// 检查是否需要生成构建分析报告（命令行参数包含--report时）
const report = rawArgv.includes('--report')
// 执行Vue CLI的打包命令，同时传递所有命令行参数
// 等价于在终端执行vue-cli-service build [参数]
run(`vue-cli-service build ${args}`)
// 预览服务器的端口号（固定为9526）
const port = 9526
// 从vue配置中获取项目的公共路径（publicPath），用于正确拼接预览地址
const publicPath = config.publicPath
// 导入connect框架，用于创建本地服务器
var connect = require('connect')
// 导入serve-static中间件，用于托管静态文件
var serveStatic = require('serve-static')
// 创建connect服务器实例
const app = connect()
// 配置服务器：
// 1. 以vue配置的publicPath为基础路径
// 2. 托管当前目录下的dist文件夹（打包后的静态文件）
// 3. 设置默认首页为index.html
app.use(
publicPath,
serveStatic('./dist', {
index: ['index.html', '/']
})
)
// 启动服务器，监听指定端口
app.listen(port, function () {
// 在终端输出绿色的预览地址，方便开发者直接访问
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))
// 如果需要生成报告，额外输出报告的访问地址
if (report) {
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))
}
})
} else {
// 如果不需要预览，仅执行打包命令（与npm run build效果相同）
run(`vue-cli-service build ${args}`)
}
