时间戳

首页 > 解决方案 > 生产中的多页 VueJS / Express 资产问题

express - 生产中的多页 VueJS / Express 资产问题

问题描述

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

当我转到 pat-simplebooks.herokuapp.com/app 的“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="/ ">到 HTML 模板中，<base href="/app/" >但无济于事。此外，publicPath如 VueJS 文档中所述，webpack 选项不适用于多个页面。

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

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

标签： expressvue.jsheroku

解决方案

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

该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')))

推荐阅读