springboot vue前后端分离宝塔上线

### SpringBoot + Vue 前后端分离项目在宝塔面板上的部署教程 #### 一、环境准备 为了顺利部署前后端分离的项目，需要先准备好必要的运行环境。以下是具体的准备工作： 1. **云服务器配置** 购买并配置一台云服务器（如阿里云），确保其操作系统支持宝塔面板安装。通常推荐使用 CentOS 或 Ubuntu 系统。 2. **宝塔面板安装** 登录到云服务器，通过 SSH 进行操作，执行命令完成宝塔面板的安装[^1]。例如，在 CentOS 下可以运行以下命令： ```bash yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ``` 3. **安全组设置** 在云服务提供商的安全组中开放所需的端口，包括但不限于 HTTP (80)，HTTPS (443)，以及自定义的服务端口（如前端使用的 8087 和后端使用的 8088）[^2]。 --- #### 二、后端部分：SpringBoot 的部署 1. **打包 SpringBoot 应用程序** 使用 Maven 构建工具对后端项目进行打包，生成可执行的 JAR 文件。具体命令如下： ```bash mvn clean package -DskipTests ``` 打包完成后会在 `target` 目录下找到对应的 `.jar` 文件。 2. **上传文件至服务器** 将生成的 JAR 文件上传到服务器指定路径，可以通过 FTP 工具或者直接拖拽的方式完成。 3. **启动 SpringBoot 服务** 利用 Linux 命令启动应用程序，并将其设为后台进程运行。示例命令如下： ```bash nohup java -jar your-springboot-app.jar > app.log 2>&1 & ``` 此外，也可以借助宝塔面板中的任务计划功能来管理应用的启停状态[^3]。 4. **跨域处理** 如果前端访问后端接口时存在跨域问题，则需在 SpringBoot 中添加 CORS 支持。可以在全局配置类中加入如下代码片段： ```java @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") // 允许所有域名访问 .allowedMethods("GET", "POST", "PUT", "DELETE"); } }; } ``` --- #### 三、前端部分：Vue 的部署 1. **构建 Vue 项目** 在本地开发环境中运行以下命令以生成静态资源文件夹 `dist`： ```bash npm run build ``` 构建后的文件会存储于项目的根目录下的 `dist` 文件夹内。 2. **创建网站站点** 登入宝塔面板界面，点击左侧菜单栏中的“网站”，新增一个站点绑定域名地址。注意选择合适的 PHP 版本作为默认解析引擎，尽管实际并不需要用到它。 3. **上传静态文件** 把刚才编译好的 `dist` 文件夹里的全部内容复制粘贴进新建立起来的那个虚拟主机根目录里去覆盖掉原来的内容即可。 4. **Nginx 反向代理配置** 修改 Nginx 配置文件使得请求能够正确转发给后端 API 接口。编辑对应站点的配置项，增加类似下面这样的规则段落： ```nginx location /api/ { proxy_pass http://localhost:8088/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } ``` --- #### 四、测试与优化 - 测试整个系统的连通性和功能性是否正常工作。 - 对性能瓶颈处做针对性调整比如启用缓存机制减少数据库查询次数等等措施提升用户体验满意度水平。 ---