保姆级实战宝塔面板部署若依Vue3前后端分离项目全流程解析部署前后端分离项目时最让人头疼的莫过于Nginx配置和路由刷新404问题。上周帮朋友部署若依Vue3项目时发现网上教程要么过于简略要么关键配置语焉不详。本文将从一个真实部署案例出发手把手带你避开所有常见坑点。1. 环境准备与项目结构调整在开始部署前确保你的宝塔面板已安装以下基础环境Nginx 1.20建议使用宝塔默认安装的最新稳定版Java 8/11根据若依项目要求选择MySQL 5.7宝塔面板可一键安装Node.js 16用于前端构建项目结构调整建议ruoyi-vue3/ ├── ruoyi-admin # 后端项目 │ ├── src/main/resources │ │ ├── application.yml │ │ ├── application-prod.yml │ └── pom.xml └── ruoyi-ui # 前端项目 ├── vite.config.js ├── .env.production └── package.json提示建议在本地开发环境先完成代码调整和测试再上传到服务器部署。这样可以减少服务器上的调试时间。2. 后端部署关键配置2.1 数据库与配置文件修改首先在宝塔面板创建数据库字符集选择utf8mb4。然后修改后端配置文件# application-prod.yml server: port: 8080 # 建议使用非80端口 servlet: context-path: / spring: datasource: url: jdbc:mysql://localhost:3306/ruoyi?useSSLfalseserverTimezoneAsia/Shanghai username: your_db_username password: your_db_password常见问题排查数据库连接失败检查宝塔面板的MySQL是否放行了3306端口时区问题确保url中包含serverTimezoneAsia/Shanghai内存不足可在宝塔Java项目设置中调整JVM参数2.2 Maven打包与上传使用以下命令打包后端项目mvn clean package -DskipTests打包完成后将target/ruoyi-admin.jar上传到服务器建议放在/www/server/ruoyi目录下。2.3 宝塔Java项目配置在宝塔面板Java项目中添加新项目选择上传的JAR文件设置项目端口与yml中一致添加域名如api.yourdomain.com注意如果使用域名访问需要在域名解析中添加A记录指向服务器IP。3. 前端部署深度解析3.1 环境变量与构建配置修改前端项目的生产环境配置// vite.config.js export default defineConfig({ server: { proxy: { /prod-api: { target: http://api.yourdomain.com, // 后端API地址 changeOrigin: true, rewrite: (path) path.replace(/^\/prod-api/, ) } } } })构建前端项目yarn install yarn build:prod构建完成后将dist目录上传到服务器建议放在/www/wwwroot/frontend。3.2 宝塔静态站点配置在宝塔面板网站中添加新站点选择静态网站根目录设置为/www/wwwroot/frontend/dist添加前端域名如www.yourdomain.com4. Nginx高级配置实战4.1 解决Vue Router刷新404问题这是前后端分离项目最常见的痛点。修改Nginx配置server { listen 80; server_name www.yourdomain.com; location / { root /www/wwwroot/frontend/dist; try_files $uri $uri/ /index.html; index index.html; } location /prod-api/ { proxy_pass http://127.0.0.1:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }关键点解析try_files $uri $uri/ /index.html这是解决404问题的核心配置/prod-api/的斜杠proxy_pass末尾的/决定了URL重写规则跨域问题通过Nginx代理解决无需在前端设置CORS4.2 性能优化配置在Nginx配置中添加以下内容提升性能gzip on; gzip_min_length 1k; gzip_comp_level 6; gzip_types text/plain text/css application/json application/javascript text/xml; location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 1y; add_header Cache-Control public; }5. HTTPS与安全加固5.1 免费SSL证书配置在宝塔面板SSL中选择Lets Encrypt免费证书勾选强制HTTPS选项修改Nginx配置自动跳转HTTPSserver { listen 80; server_name www.yourdomain.com api.yourdomain.com; return 301 https://$host$request_uri; }5.2 安全防护措施在宝塔面板安全中放行必要端口如80,443,8080设置SSH端口为非默认22定期备份数据库和项目文件部署完成后可以通过以下命令检查服务状态# 检查Java服务 ps aux | grep java # 检查Nginx配置 nginx -t # 查看错误日志 tail -f /www/wwwlogs/nginx_error.log在实际项目中我发现最常出问题的环节是Nginx的proxy_pass配置和后端的context-path设置。有一次部署时因为漏掉了proxy_pass末尾的斜杠导致所有API请求都返回404调试了整整两小时才发现问题。建议每次修改配置后先用nginx -t测试语法再重启服务。