跳到主要内容

如何本地部署和运行网页

本文说明在本机安装环境、启动预览、以及编译静态站点后本地访问的完整步骤。适用于 Windows（PowerShell）。

如何本地部署和运行网页

本文说明在本机安装环境、启动预览、以及编译静态站点后本地访问的完整步骤。适用于 Windows（PowerShell）。

1. 环境要求​

  • Node.js ≥ 24.14（建议安装当前 LTS）
  • 本仓库代码已克隆到本地（例如 d:\git\web_tools）

检查是否已安装​

打开 PowerShell，执行：

node -v
npm -v

若能显示版本号（例如 v24.19.0），可跳过下一节安装步骤。

未安装时：安装 Node.js​

winget install OpenJS.NodeJS.LTS --accept-package-agreements --accept-source-agreements

安装完成后关闭并重新打开终端，再执行 node -v / npm -v 确认。

也可从官网下载安装包：https://nodejs.org/

2. 安装项目依赖（首次或依赖变更后）​

进入仓库根目录：

cd d:\git\web_tools
npm install

成功后会出现 node_modules 目录。以后若未改动 package.json，一般不必重复安装。

3. 方式一：开发模式运行（日常预览推荐）​

适合改文档、看效果，支持热更新：

cd d:\git\web_tools
npm start

终端出现类似提示后，用浏览器打开：

http://localhost:3000/

  • 修改 docs/ 下的 Markdown 并保存，浏览器会自动刷新
  • 停止服务：在该终端按 Ctrl + C

4. 方式二：生产编译后本地部署（接近正式发布）​

先编译成静态网页，再在本机用内置服务访问：

cd d:\git\web_tools
npm run build
npm run serve
  • npm run build：输出到仓库下的 build/ 目录
  • npm run serve：在本机托管 build/，默认仍为 http://localhost:3000/

验收建议：

  • 打开首页，确认标题为「产品资料与配置中心」
  • 打开「文档」「使用工具」页面无报错
  • 确认 build\index.html 文件存在

将 build/ 整个目录拷贝到公司 Web 服务器（IIS、Nginx 等）即可做正式托管；本机 npm run serve 仅用于验证构建结果。

5. 常用命令速查​

命令作用
npm install安装依赖
npm start开发预览（热更新）
npm run build生产构建 → build/
npm run serve本地预览构建结果
npm run clear清除缓存（异常时可先执行再 start/build）

6. 常见问题​

端口 3000 已被占用​

另开端口，例如：

npm start -- --port 3001
npm run serve -- --port 3001

然后访问 http://localhost:3001/。

提示找不到 node / npm​

Node 未安装，或安装后未重开终端。按第 1 节重新检查 PATH。

npm install 很慢或失败​

检查网络；可稍后重试。公司内网如有 npm 镜像，可向开发同事索取配置方式。

页面是旧内容​

先停掉当前服务，执行 npm run clear，再重新 npm start 或 npm run build。

7. 相关文档​

  • 如何更新文档：运维改 Markdown 的约定与流程
  • 仓库根目录的《上传桥部署说明.md》：网页上的「上传规格书 / 上传下载文件 / 上传使用工具」怎么用、以及怎么部署到服务器（含第 4 节本机用法）