Vue项目用宝塔Nginx托管最快最稳，关键要正确配置publicPath、Nginx root路径及history模式的try_files规则，避免资源404和路由刷新404。
Vue 项目打包后直接用宝塔的 Nginx 托管，是最快最稳的上线方式——前提是静态资源路径、Nginx 配置和 history 模式这三处不踩坑。
确认 vue.config.js 的 publicPath 设置正确
打包路径错，所有 JS/CSS/图片 404，这是最常见也最容易被忽略的问题。Vue CLI 默认用 /，意味着资源从根目录加载；但如果你的项目部署在子路径（比如 https://example.com/myapp/），就必须显式改掉。
- 根路径部署（推荐）：保持
publicPath: '/'，打包后所有资源引用形如/js/app.xxx.js，对应 Nginx 的root目录即可 - 子路径部署：设为
publicPath: '/myapp/'，同时确保router的base也同步设为'/myapp/'，否则路由跳转和资源加载都会失败 - 绝对路径部署（如 CDN）：可设为
publicPath: 'https://cdn.example.com/myapp/'，此时打包产物里所有资源地址自动带上 CDN 前缀
改完务必重新运行 npm run build，检查 dist/index.html 中的 script 和 link 标签路径是否符合预期。
把 dist 文件夹上传到宝塔并配置 Nginx 站点
别用宝塔“网站根目录”面板里的“上传”按钮拖整个文件夹——它会把 dist 本身也当成一级目录，导致访问时多一层路径。正确做法是直接上传 dist 内容到目标目录。
立即学习“前端免费学习笔记（深入）”；
- 在宝塔「网站」→「添加站点」，域名填好，根目录设为
/www/wwwroot/myapp（举例） - 用宝塔文件管理器进入该目录，清空默认生成的
index.html，再把本地dist里的所有文件（index.html、js/、css/等）**直接上传进去**，不要带dist文件夹层级 - 进「网站设置」→「配置文件」，确认
root指向的就是这个路径，例如：root /www/wwwroot/myapp;
必须加 try_files 支持 Vue Router 的 history 模式
如果用了 mode: 'history'（绝大多数生产项目都用），Nginx 默认不会把 /user/123 这类非物理路径转发给 index.html，结果就是刷新页面 404。
在宝塔「网站设置」→「配置文件」中，找到 location / { ... } 块，把它替换成：
location / {
try_files $uri $uri/ /index.html;
}
-
$uri匹配真实存在的文件（如/js/app.js） -
$uri/匹配真实存在的目录（如/assets/） -
/index.html是兜底：所有其他请求（如/about）都返回index.html，由前端路由接管
删掉任何可能冲突的 location ~ \.php$ 或重写规则，纯静态托管不需要 PHP 处理。
验证与调试：看浏览器 Network 和 Nginx 日志
上线后别只刷首页，重点验证三件事：
- 打开浏览器开发者工具 → Network 标签，刷新页面，确认所有
.js、.css请求状态码是200，不是404；路径要和index.html里写的完全一致 - 手动在地址栏输入一个深层路由（如
/admin/dashboard）并回车，看是否正常渲染，而不是 Nginx 返回 404 页面 - 如果出问题，立刻去宝塔「网站」→「日志」→「错误日志」，搜索
open() "/www/wwwroot/myapp/js/xxx.js" failed这类提示，能直接定位是路径错还是权限错
注意：宝塔默认关闭了 Nginx 的 gzip 和 expires 缓存，建议在配置文件里手动加上，不然首屏加载慢一倍不止。
