DEPLOY GUIDE
宝塔面板部署教程(dist 运行目录)
从本地打包到宝塔站点上线:运行目录、伪静态、HTTPS 与安全头配置,一次讲清,照做即可上线。
REQUIREMENTS
环境要求清单
| 项目 | 要求 | 级别 |
|---|---|---|
| Web 服务 | Nginx 1.18+(宝塔面板默认) | ◈ 必须 |
| 运行目录 | 站点运行目录设置为 dist | ◈ 必须 |
| Node.js | v18+(仅本地或 CI 打包时需要) | ◈ 构建期 |
| SSL 证书 | Let’s Encrypt 或商业证书,启用 HTTPS | ◈ 建议 |
| PHP / MySQL | 本前端为纯静态产物,无需 PHP;接口端按服务端要求部署 | ◈ 按需 |

STEP 01–02
本地打包与宝塔站点创建
前端项目在本地或 CI 中完成打包,产物 dist 目录即宝塔运行目录 —— 无需在服务器安装 Node 环境。
TERMINAL // BUILD
# 1. 安装依赖(本地电脑或 CI 环境执行)
npm install
# 2. 打包生成 dist 运行目录
npm run build
# 3. 产物结构
# dist/
# ├── index.html 首页
# ├── xiaochuyun-gongneng.html 产品功能
# ├── xiaochuyun-shouquan.html 授权激活
# ├── xiaochuyun-daili.html 代理开通
# ├── xiaochuyun-bushu.html 源码部署
# ├── xiaochuyun-jiaocheng.html 帮助答疑
# ├── xiaochuyun-about.html 关于我们
# ├── assets/ JS / CSS 产物(带 hash)
# ├── images/ 本地化 WebP 图片
# ├── robots.txt
# └── sitemap.xmlBAOTA PANEL // STEPS
宝塔面板操作步骤:
1. 【网站】→【添加站点】,填写域名,根目录可先任意;
2. 站点设置 →【网站目录】→ 运行目录选择 /dist,保存;
3. 上传 dist 目录内全部文件到该目录;
4. 站点设置 →【伪静态】→ 粘贴下方伪静态规则 → 保存;
5. 站点设置 →【SSL】→ 申请证书并开启【强制 HTTPS】。
STEP 03
伪静态规则配置
全部页面均为真实 .html 文件,伪静态仅需一条兜底规则;将以下内容粘贴到宝塔【伪静态】输入框保存即可。
NGINX // REWRITE
# 宝塔伪静态规则:全部页面均为真实 .html 文件
location / {
try_files $uri $uri/ /index.html;
}
# 可选:把 /index.html 301 到根路径,避免首页重复收录
if ($request_uri = /index.html) {
return 301 /;
}
STEP 04
HTTPS 与安全头设置
在站点配置中追加安全响应头,防御点击劫持、MIME 嗅探与外域脚本注入,同时开启静态资源缓存提升加载速度。
NGINX // SECURITY HEADERS
# 安全头设置(放在 站点设置 → 配置文件 的 server{} 内)
add_header X-Content-Type-Options nosniff always;
add_header X-Frame-Options SAMEORIGIN always;
add_header Referrer-Policy strict-origin-when-cross-origin always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://doluodalu.com; font-src 'self'; connect-src 'self'; frame-ancestors 'self'; base-uri 'self'" always;NGINX // CACHE & GZIP
# 静态资源缓存与压缩(放在 server{} 内)
gzip on;
gzip_min_length 1k;
gzip_types text/css application/javascript application/json image/svg+xml;
location ~* \.(webp|png|jpg|ico|svg|woff2)$ {
expires 30d;
add_header Cache-Control "public, immutable";
}
location ~* \.(css|js)$ {
expires 7d;
add_header Cache-Control "public";
}TROUBLESHOOTING