Vue+SpringBoot 项目一键部署：从小白到精通的实战指南

最近帮朋友部署一个 Vue+SpringBoot 项目，踩了不少坑。想着把整个流程和遇到的问题整理一下，分享给大家，希望能少走弯路。

前期准备

1. 服务器：建议选择国内云服务器厂商，如阿里云、腾讯云、华为云等。购买时注意选择合适的地域和配置，操作系统推荐 CentOS 7 或 Ubuntu 20.04。
2. 域名：如果需要使用域名访问，提前购买并完成备案。
3. 工具：需要安装 Git、Maven、Node.js 等工具。推荐使用宝塔面板，可以简化服务器管理。

后端 SpringBoot 项目部署

1. 打包：在 SpringBoot 项目根目录下，执行 mvn clean package 命令，将项目打包成 JAR 或 WAR 包。

mvn clean package

2. 上传：将打包好的 JAR 或 WAR 包上传到服务器指定目录，例如 /opt/app/。

scp target/your-project.jar user@your-server:/opt/app/

3. 启动：使用 java -jar 命令启动 SpringBoot 项目。

nohup java -jar your-project.jar > your-project.log 2>&1 &

• nohup：使程序在后台运行。
• >：将标准输出重定向到日志文件。
• 2>&1：将标准错误输出也重定向到日志文件。
• &：将命令放入后台执行。

4. 配置守护进程（可选）：为了防止 SpringBoot 项目意外停止，可以使用 Systemd 或 Supervisor 配置守护进程，实现自动重启。

• Systemd 示例：

  创建 `/etc/systemd/system/your-project.service` 文件，内容如下：

  ```
  [Unit]
  Description=Your Project
  After=network.target

  [Service]
  User=root
  WorkingDirectory=/opt/app/
  ExecStart=/usr/bin/java -jar your-project.jar
  Restart=on-failure

  [Install]
  WantedBy=multi-user.target
  ```

  执行以下命令启动服务：

  ```bash
  systemctl daemon-reload
  systemctl start your-project
  systemctl enable your-project
  systemctl status your-project
  ```

前端 Vue 项目部署

1. 打包：在 Vue 项目根目录下，执行 npm run build 或 yarn build 命令，将项目打包成静态文件。

npm run build

2. 上传：将打包好的静态文件（通常在 dist 目录下）上传到服务器指定目录，例如 /var/www/your-project/。

scp -r dist/* user@your-server:/var/www/your-project/

3. 配置 Nginx：配置 Nginx，将域名或 IP 地址指向 Vue 项目的静态文件目录。这是关键步骤，需要正确配置反向代理和负载均衡（如果需要）。

server {
    listen 80;
    server_name your-domain.com;

    location / {
        root /var/www/your-project; # Vue 项目的静态文件目录
        index index.html index.htm;
        try_files $uri $uri/ /index.html; # 解决 Vue Router history 模式下的 404 问题
    }

    location /api/ { # 将 /api/ 开头的请求转发到 SpringBoot 项目
        proxy_pass http://localhost:8080/; # SpringBoot 项目的运行地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

• root：指定 Vue 项目的静态文件目录。
• index：指定默认首页文件。
• try_files：解决 Vue Router history 模式下的 404 问题。
• proxy_pass：将请求转发到 SpringBoot 项目。
• proxy_set_header：设置请求头，传递客户端信息。

4. 重启 Nginx：修改 Nginx 配置文件后，需要重启 Nginx 使配置生效。

nginx -t # 检查 Nginx 配置文件是否正确
nginx -s reload # 重启 Nginx

Vue+SpringBoot 项目部署常见问题及解决方案

1. 跨域问题：前端 Vue 项目和后端 SpringBoot 项目部署在不同域名或端口时，会出现跨域问题。可以在 SpringBoot 项目中配置 CORS，允许跨域请求。

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("*") // 允许所有域名跨域
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的请求方法
                        .allowedHeaders("*") // 允许的请求头
                        .allowCredentials(true);
            }
        };
    }
}

• allowedOrigins("*")：允许所有域名跨域，生产环境建议修改为具体的域名。

2. Nginx 404 问题：Vue Router 使用 history 模式时，刷新页面会出现 404 问题。需要在 Nginx 配置文件中添加 try_files $uri $uri/ /index.html; 解决。

   

3. 静态资源访问问题：确保 Nginx 配置文件中的 root 指向 Vue 项目的静态文件目录，并且静态文件存在。

   

4. SpringBoot 项目启动失败：检查 SpringBoot 项目的日志文件，查看是否有异常信息。常见的错误包括端口占用、数据库连接失败等。

   

总结

将 Vue+SpringBoot 项目部署到服务器需要一定的技术积累，但只要掌握了基本原理和流程，并注意避坑，就可以顺利完成部署。希望本文能帮助大家更好地理解和实践 Vue+SpringBoot 项目的部署过程。