Vue+Django部署Heroku后Vue静态文件请求路径错误问题

问题表现 #

本地开发环境一切正常，部署到Heroku后：

• Django模板及应用主体能正常加载
• Vue相关静态文件请求路径错误，控制台输出以下报错：

GET https://brainteasers.herokuapp.com/wordle-game/static/dist/js/chunk-vendors.58fb68d0.js net::ERR_ABORTED 404 (Not Found)
Refused to execute script from 'https://brainteasers.herokuapp.com/wordle-game/static/dist/js/chunk-vendors.58fb68d0.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

• 无Vue Router路由的页面（如contact-us）静态文件请求路径正确，示例：https://brainteasers.herokuapp.com/static/js/home-styles.js；但带有独立URL的Vue SPA页面（如wordle-game），静态文件请求路径错误地包含了路由前缀，变成https://brainteasers.herokuapp.com/wordle-game/static/dist/js/chunk-vendors.58fb68d0.js，导致404。

项目目录结构 #

static (backend)
├── css
├── dist (vue build产物目录)
│   ├── css
│   └── js
└── img

当前vue.config.js配置 #

module.exports = {
  publicPath: 'static/dist/', // 期望拼接在顶级域名后的基础URL
  outputDir: '../static/dist', // Vue构建文件输出到Django的static/dist目录
  indexPath: '../../templates/_base_vue.html', // 生成的index文件路径

  configureWebpack: {
    devServer: {
      devMiddleware: {
        writeToDisk: true
      }
    }
  }
};

核心困惑 #

Vue Router的路由设置干扰了静态文件的请求路径——路由前缀被错误地加到了静态文件URL中。目前卡在如何通过配置区分Django模板的查找路径和Vue静态文件的存储路径，避免静态文件请求被路由路径影响。

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