运行npm run build:watch后，浏览器应指向何处查看项目？

DevOps 小满

2026-7-12

问题分析与解决

你的npm run build:watch脚本仅实现了监听文件变更并自动重新构建的功能，但没有启动本地HTTP服务器，所以浏览器找不到可访问的地址。

解决步骤：

第一步：确认构建产物目录
先查看你的build脚本执行后，生成的静态文件（HTML/CSS/JS等）存放在哪个目录，常见的是dist/、build/或public/。
第二步：启动本地静态服务器
你需要额外启动一个本地服务器来托管构建后的文件，推荐几种简单方法：
1. 使用serve工具
  先安装依赖：
```
npm install -D serve
```
  在package.json的scripts中添加：
```
"serve": "serve 你的构建目录" // 比如"serve": "serve dist"
```
  之后开两个终端：一个运行npm run build:watch，另一个运行npm run serve，终端会输出服务器地址（通常是http://localhost:3000），直接在浏览器访问即可。
2. 使用live-server工具
  安装依赖：
```
npm install -D live-server
```
  添加脚本：
```
"serve": "live-server 你的构建目录"
```
  操作同上，live-server还会自动刷新浏览器。
3. 用打包工具内置的开发服务器（如果用了webpack/vite等）
  比如webpack可以配置devServer，然后运行webpack serve；vite直接用vite命令，这类工具会同时处理监听构建和服务器启动。
第三步：优化（可选）
用concurrently工具同时运行监听和服务器脚本，不用开多个终端：
安装依赖：
```
npm install -D concurrently
```
添加脚本：
```
"dev": "concurrently \"npm run build:watch\" \"npm run serve\""
```
之后直接运行npm run dev即可。