如何将搭载Django数据库的Vue.js前后端应用合并部署到Heroku

完全支持在Heroku上将Django与Vue合并为单个应用部署，不需要拆分两个独立服务，核心逻辑是由Django直接托管Vue打包生成的静态资源，整套流程仅需一套运行环境即可完成公网访问。

核心操作步骤 #

1. 调整前端打包配置 #

修改frontend/vue.config.js，将打包产物的输出路径直接指向项目根目录下的静态资源输出文件夹，同时配置正确的资源访问路径，避免路由跳转时出现静态资源404：

• 配置publicPath: '/'，保证所有静态资源的引用路径从根域名开始
• 配置输出路径，让npm run build生成的js/css/图片资源直接输出到项目根目录下的static_dist目录

2. 调整Django项目配置 #

修改my-app-shop/settings.py

• 将Vue打包输出的static_dist目录加入STATICFILES_DIRS，保证Django可以识别到前端打包的静态文件
• 配置STATIC_ROOT为生产环境静态文件收集目录，接入Whitenoise插件实现静态资源托管，无需额外配置Nginx
• 调整ALLOWED_HOSTS，加入你自己的Heroku应用域名

修改my-app-shop/urls.py

配置兜底路由规则，避免Vue路由刷新时出现404：

• 保留/admin、/api路径下的原有Django视图逻辑
• 新增兜底路由，将所有非Django后端处理的请求，直接指向Vue打包生成的index.html文件，让前端路由自行处理页面跳转

3. 配置Heroku多Buildpack执行顺序 #

你的项目同时需要Node.js环境（打包Vue）和Python环境（运行Django），按照先后顺序配置Buildpack即可：

• 先添加Node.js Buildpack，保证构建时可以执行前端打包命令
• 再添加Python Buildpack，保证依赖安装、Django服务启动的流程正确执行

4. 配置跨目录的构建触发脚本 #

因为你的Vue项目存放在frontend子目录而非项目根目录，需要在项目根目录新建一个最小化的package.json文件，作为Heroku构建流程的钩子：

{
  "scripts": {
    "heroku-postbuild": "cd frontend && npm install && npm run build"
  }
}

这个脚本会在Node依赖安装完成后，自动进入frontend目录安装前端依赖，执行打包命令，把产物输出到之前约定的静态目录。

5. 配置应用启动命令 #

在项目根目录新建Procfile文件，定义生产环境的启动命令：
web: gunicorn my-app-shop.wsgi --log-file -
该命令会使用gunicorn启动Django服务，由Whitenoise插件统一托管所有前端静态资源。

注意事项 #

• 记得把frontend/node_modules加入根目录的.gitignore，不要把本地依赖提交到Git仓库，构建时Heroku会自动完成依赖安装
• 合并部署后前后端属于同域服务，无需额外配置跨域规则，可以简化原有的CORS中间件配置
• 之前分别部署的两个独立Heroku应用可以直接删除，合并后仅需单个应用即可提供完整能力，减少维护成本

内容的提问来源于stack exchange，提问作者Stefan