刷新页面后，无法在Heroku上部署Vue + Webpack应用程序

Question

我使用vue-cliwebpack模板生成了一个vue应用程序，并使用本指南将其部署到了heroku 。我能够毫无问题地运行它，但是当我刷新页面或直接访问子路由时，它失败了。

server.js

var express = require('express')
var path = require('path')
var serveStatic = require('serve-static')
app = express()
app.use(serveStatic(__dirname))
var port = process.env.PORT || 5000
app.listen(port)
console.log('server started '+ port)

router.js

我的Vue路由器配置

export default new Router({ mode: 'history', routes })

Answer 1

Spa通常都在其中，index.html并且应用程序中其他路线的导航由javascript本身处理。刷新或直接访问子路由时，这会导致失败。

由于您已经history在vuejs路由器配置中使用mode: 'history'来配置模式，因此可以考虑使用connect-history-api-fallback，如下所述：示例服务器配置。

1. npm install --save connect-history-api-fallback

2. 将此中间件添加到您的快递中

   var history = require('connect-history-api-fallback');
   
   var express = require('express')
   var path = require('path')
   var serveStatic = require('serve-static')
   app = express()
   //add this middleware
   app.use(history());    
   app.use(serveStatic(__dirname))
   var port = process.env.PORT || 5000
   app.listen(port)
   console.log('server started '+ port)