生产中的多页 VueJS / Express 资产问题答案

【问题标题】：Multi page VueJS / Express asset issue on production生产中的多页 VueJS / Express 资产问题
【发布时间】：2020-03-09 17:55:45
【问题描述】：

我正在尝试将 VueJS/Express 应用程序部署到 Heroku，该应用程序由两个 App.vue 实例组成，使用 vue.config.js 上的“pages”选项。一个用于主页，然后一个单独的 Vue 应用程序用于 Saas 应用程序本身。一切都在本地开发中工作，但我正在努力处理 Express 中的服务器设置，以便在 Heroku 上进行生产。

当我转到 pat-simplebooks.herokuapp.com/app 的“应用程序”页面时，查看 DevTools 中的源选项卡，返回的 app.js 和 app.css 文件都是 app.html 的实际 HTML，因此应用程序未加载。

主页工作正常，并按预期调用“索引”页面。

这是我的 vue.config.js

module.exports = {
  pages: {
    index: {
        entry: 'src/pages/index/main.js',
        template: 'public/index.html',
        chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    app: {
        entry: 'src/pages/app/main.js',
        template: 'public/app.html',
        chunks: ['chunk-vendors', 'chunk-common', 'app']
    }
  }
}

以及Express中的相关制作设置；

const history = require('connect-history-api-fallback');

if(process.env.NODE_ENV === 'production'){

  app.use(history({
    rewrites: [{
        from: /\/app/,
        to: '/app.html'
    }]
  }));

  app.use(express.static(path.join(__dirname, '../../client/dist')))

}

我尝试将<base href="/ "> 和<base href="/app/" > 添加到HTML 模板中，但无济于事，正如我在其他答案中所建议的那样。此外，如 VueJS 文档中所述，publicPath webpack 选项不适用于多个页面。

删除 Express 中的历史重定向设置允许我导航到 http://pat-simplebooks.herokuapp.com/app.html - 这有效，但是一旦我刷新页面，它就会重定向回“索引”页面。

任何帮助都会很棒，我已经用尽了我的谷歌搜索技能。

【问题讨论】：

标签： express vue.js heroku

【解决方案1】：

我设法解决了，以防将来有人遇到同样的问题。

connect-history-api-fallback 包需要提供 htmlAcceptHeaders 选项以仅重写 html 位置，而不是 JS/CSS 资产。

app.use(history({

    rewrites: [{
        from: /\/app/,
        to: '/app/index.html'
    }],

    htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']

}));

app.use(express.static(path.join(__dirname, '../../client/dist')))

【讨论】：