vue和springboot项目部署到网站
时间: 2025-06-29 18:05:53 浏览: 11
### 部署 Vue 和 Spring Boot 项目到生产环境
#### Nginx 安装与配置
对于在 Linux 上部署前后端分离的 Vue + Spring Boot 项目,完成 Nginx 的安装之后需调整其配置文件来适配网站应用的需求[^2]。具体来说,在 Nginx 中设置如下路径映射:
```nginx
location / {
root /app/osd_mall/vue_app/dist;
index index.html index.htm;
}
location /api {
proxy_pass http://localhost:28019/api/v1;
}
```
此配置使得根目录下的请求被导向至前端构建后的静态资源位置 `/app/osd_mall/vue_app/dist`;而带有 `/api` 前缀的 API 请求则转发给运行于本地 `28019` 端口上的 Spring Boot 应用程序。
#### 解决 Vue 路由引起的 404 错误
为了避免因 Vue 单页面应用程序 (SPA) 导致的 Nginx 返回 404 页面找不到错误的情况发生,应在 Nginx 设置里加入额外处理逻辑以确保所有未匹配成功的 URL 可重定向回首页加载 JavaScript 文件并交由前端框架接管路由解析工作[^3]:
```nginx
location / {
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
```
上述更改允许任何非现有文件或目录的访问尝试最终都返回 `index.html`,从而让 SPA 正常运作而不受浏览器地址栏变化影响。
#### 启动和管理 Spring Boot 应用
针对基于 Spring Boot 构建的服务端部分,在 Linux 生产环境中启动服务前应考虑将其作为守护进程长期稳定运行,并提供简便的方式来进行启停控制[^1]。可以利用诸如 Systemd 或者 PM2 这样的工具实现自动化运维目标。
通过以上步骤能够有效地将一个完整的 Vue 加 Spring Boot 方案部署上线,使用户可以通过互联网正常浏览交互功能丰富的 Web 应用。
阅读全文
相关推荐













