超通俗小白版：工具导航站宝塔部署一步一步照着做
全程分 4 大块，不用懂代码，跟着点就行
一、先准备好三样东西（没有就弄好）
- 云服务器（阿里云 / 腾讯云等），装好了宝塔面板
- 域名（比如 shturl.cc/ojx），已经解析到服务器 IP；没有域名先用 IP 凑活
- 两个密钥（去 Supabase 复制保存好）
- VITE_SUPABASE_URL
- VITE_SUPABASE_ANON_KEY
二、最简单方式：本地电脑打包（新手首选）
1. 电脑安装工具
- 下载安装 Node.js（官网直接下一步安装）
- 重启电脑，打开 cmd 黑窗口
2. 拿到源码
- 源码仓库点下载 ZIP，解压到桌面，文件夹名字简单点，比如
nav
本项目源码中 package.json 的 build 脚本被平台注释掉了，需要手动恢复：
打开 package.json，找到：
"build": "echo 'Do not use this command, only use lint to check'"
修改为：
"build": "tsc && vite build"
- cmd 输入
cd Desktop\nav回车，进入项目文件夹
3. 安装依赖
cmd 输入：
等待跑完，出现没有报错就成功
4. 配置数据库密钥
- 文件夹里找到
.env文件，没有就新建文本文档改名.env - 复制粘贴下面两行，替换成你自己的 Supabase 链接和密钥
plaintext
VITE_SUPABASE_URL=https://xxx.supabase.co
VITE_SUPABASE_ANON_KEY=这里填你的密钥
保存关闭
5. 打包网站文件
cmd 输入：
plaintext
npm run build
跑完后文件夹里多出一个
dist 文件夹👉 这个 dist 里面所有文件，就是要传到服务器的网站源码
三、宝塔面板上传搭建网站
1. 新建站点
- 登录宝塔面板 → 左侧【网站】→【添加站点】
- 域名填你的网址，没有域名填服务器公网 IP
- 根目录默认
/www/wwwroot/xxx不用改 - PHP 版本选 纯静态
- 点提交
2. 上传 dist 打包文件
- 点刚创建的网站右侧【根目录】，进入文件夹
- 删除里面自带的 index.html、404.html 所有默认文件
- 上传你电脑 dist 里面全部文件
注意：不要上传 dist 文件夹，要把 dist 里面的文件丢到根目录
正确路径：
/www/wwwroot/你的站点/index.html
3. 设置伪静态（解决刷新 404 关键一步）
- 网站右侧【设置】→【伪静态】
- 下拉选自定义，把下面整段复制进去
nginx
location / {
try_files $uri $uri/ /index.html;
}
location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|otf|map)$ {
expires 6M;
access_log off;
add_header Cache-Control "public";
}
保存
4. 安装 SSL 证书（https）
- 设置 → SSL → Let’s Encrypt
- 勾选域名，申请证书
- 打开【强制 HTTPS】开关
5. 重启 Nginx
宝塔右上角找到重启 Nginx，点一下
四、设置管理员后台权限
- 登录 Supabase 后台，打开你的项目
- 左侧 Table Editor，打开
profiles表 - 找到你注册的账号，把
role改成admin - 重新登录网站，输入
/admin就能进后台管理
五、常见踩坑一句话解决
- 打开页面正常，刷新页面 404 → 伪静态没复制对，重新粘贴保存
- 页面空白、加载失败 → .env 里面 Supabase 链接 / 密钥填错
- 上传完网站打不开 → 文件放错目录，不能套一层 dist 文件夹
- 后台进不去 → 没在数据库把账号改成 admin
极简流程总结
电脑装 Node → 解压源码 → 填 Supabase 密钥 → npm run build 打包 dist → 宝塔新建静态站点 → 清空目录上传 dist 内文件 → 配置伪静态 → 申请 SSL → 数据库改管理员权限 → 完工
