冠军资讯
代码一只喵内容摘要：Vue+SpringBoot 项目一键部署：从小白到精通的实战指南,
最近帮朋友部署一个 Vue+SpringBoot 项目，踩了不少坑。想着把整个流程和遇到的问题整理一下，分享给大家，希望能少走弯路。
前期准备
- 服务器：建议选择国内云服务器厂商，如阿里云、腾讯云、华为云等。购买时注意选择合适的地域和配置，操作系统推荐 CentOS 7 或 Ubuntu 20.04。
- 域名：如果需要使用域名访问，提前购买并完成备案。
- 工具：需要安装 Git、Maven、Node.js 等工具。推荐使用宝塔面板，可以简化服务器管理。
后端 SpringBoot 项目部署
- 打包：在 SpringBoot 项目根目录下，执行
mvn clean package命令，将项目打包成 JAR 或 WAR 包。
mvn clean package
- 上传：将打包好的 JAR 或 WAR 包上传到服务器指定目录，例如
/opt/app/。
scp target/your-project.jar user@your-server:/opt/app/
- 启动：使用
java -jar命令启动 SpringBoot 项目。
nohup java -jar your-project.jar > your-project.log 2>&1 &
nohup：使程序在后台运行。>：将标准输出重定向到日志文件。2>&1：将标准错误输出也重定向到日志文件。&：将命令放入后台执行。
- 配置守护进程（可选）：为了防止 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 项目部署
- 打包：在 Vue 项目根目录下，执行
npm run build或yarn build命令，将项目打包成静态文件。
npm run build
- 上传：将打包好的静态文件（通常在
dist目录下）上传到服务器指定目录，例如/var/www/your-project/。
scp -r dist/* user@your-server:/var/www/your-project/
- 配置 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：设置请求头，传递客户端信息。
- 重启 Nginx：修改 Nginx 配置文件后，需要重启 Nginx 使配置生效。
nginx -t # 检查 Nginx 配置文件是否正确
nginx -s reload # 重启 Nginx
Vue+SpringBoot 项目部署常见问题及解决方案
- 跨域问题：前端 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("*")：允许所有域名跨域，生产环境建议修改为具体的域名。
Nginx 404 问题：Vue Router 使用 history 模式时，刷新页面会出现 404 问题。需要在 Nginx 配置文件中添加
try_files $uri $uri/ /index.html;解决。
静态资源访问问题：确保 Nginx 配置文件中的
root指向 Vue 项目的静态文件目录，并且静态文件存在。
SpringBoot 项目启动失败：检查 SpringBoot 项目的日志文件，查看是否有异常信息。常见的错误包括端口占用、数据库连接失败等。
总结
将 Vue+SpringBoot 项目部署到服务器需要一定的技术积累，但只要掌握了基本原理和流程，并注意避坑，就可以顺利完成部署。希望本文能帮助大家更好地理解和实践 Vue+SpringBoot 项目的部署过程。
