如何将vue-cli构建的Vue.js与Spring Boot一同部署至Heroku？

阿华AIGC实验室

2026-5-29

嘿，我很清楚把Spring Boot后端和Vue前端一起部署到Heroku的痛点，这其实是个挺常见的需求，我给你一步步拆解，保证能搞定：

核心思路

我们要把Vue项目构建成静态文件，放到Spring Boot的静态资源目录里，然后把整个Spring Boot项目打包成Jar，最后部署到Heroku。这样Heroku只需要运行一个Java进程，就能同时服务前端页面和后端API，非常省心。

步骤1：让Vue构建产物自动进入Spring Boot

首先假设你的项目结构是这样的（如果不一样，调整路径就行）：

your-project/
├── frontend/  # Vue-cli创建的前端项目
└── backend/   # Spring Boot后端项目

在Vue项目的根目录下，找到vue.config.js（如果没有就新建一个），添加outputDir配置，让构建后的静态文件直接输出到Spring Boot的静态资源文件夹：

module.exports = {
  // 路径指向Spring Boot的静态资源目录，根据你的实际结构调整
  outputDir: '../backend/src/main/resources/static'
}

然后在Vue项目根目录执行构建命令：

npm run build

这时候你去看backend/src/main/resources/static目录，就能看到Vue构建好的index.html和其他静态文件了。

步骤2：配置Spring Boot适配Vue路由（可选但重要）

如果你的Vue用了history路由模式（不是hash模式），直接部署会出现刷新页面404的问题。这时候需要在Spring Boot里加一个转发配置，把所有非API的请求都转到Vue的index.html。

创建一个配置类：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 匹配所有单层级路径，转发到index.html
        registry.addViewController("/{spring:\\w+}")
                .setViewName("forward:/");
        // 匹配多层级路径，转发到index.html
        registry.addViewController("/**/{spring:\\w+}")
                .setViewName("forward:/");
    }
}

如果用的是hash模式，这一步可以跳过。

步骤3：给Heroku准备配置文件

Heroku需要知道怎么构建和运行你的项目，我们要在项目根目录（就是包含frontend和backend的那个目录）创建几个关键文件：

Procfile：告诉Heroku怎么启动应用

web: java -jar backend/target/*.jar

这个命令的意思是，启动后端打包好的Jar文件（Heroku会自动识别target里的最新Jar）。

system.properties：指定Java版本（根据你的Spring Boot版本选，比如Spring Boot 3需要Java 17+）

java.runtime.version=17

package.json（根目录）：让Heroku安装Node环境用于构建Vue
即使根目录不是Vue项目，也需要这个文件来告诉Heroku我们需要Node环境：

{
  "engines": {
    "node": "18.x"
  }
}

.gitignore：避免提交不必要的文件
在根目录的.gitignore里加上这些：

frontend/node_modules/
backend/target/
.DS_Store

步骤4：部署到Heroku

先确保你已经安装了Heroku CLI，然后按下面的步骤来：

登录Heroku：

heroku login

在项目根目录创建Heroku应用（替换成你的应用名）：

heroku create your-awesome-app-name

提交代码到Git：

git add .
git commit -m "Ready for Heroku deployment"

推送到Heroku：

git push heroku main

Heroku会自动执行构建流程：先安装Node依赖、构建Vue项目，然后用Maven打包Spring Boot，最后启动应用。等构建完成后，你就可以通过https://your-awesome-app-name.herokuapp.com访问你的项目了！

常见问题排查

Heroku构建时找不到npm：检查根目录的package.json是否正确指定了Node版本，Heroku会根据这个自动安装Node环境。
应用启动失败：查看Heroku日志：heroku logs --tail，通常是端口配置问题，确保Spring Boot的application.properties里配置了：