宝塔部署Vue项目，Nginx配置教程

本文详解了如何使用宝塔面板配合Nginx高效、稳定地部署Vue项目，重点破解三大核心痛点：vue.config.js中publicPath的精准配置（根路径、子路径、CDN三种场景）、dist文件正确上传至网站根目录避免路径嵌套错误，以及history路由模式下Nginx必须添加的try_files兜底规则；同时强调通过浏览器Network面板和Nginx错误日志进行快速验证与排错，并建议启用gzip和缓存优化性能——手把手避开90%新手踩坑点，让Vue静态站点真正实现“一部署就上线，一刷新不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 缓存，建议在配置文件里手动加上，不然首屏加载慢一倍不止。

终于介绍完啦！小伙伴们，这篇关于《宝塔部署Vue项目，Nginx配置教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！