當頁面刷新時，Vue + Webpack應用部署在heroku上不起作用

Question

我使用vue-cli和webpack模板生成了vue應用，並使用this guide將其部署到了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和導航等航線在應用程序中是h由javascript本身。刷新或直接訪問子路由時，這會導致失敗。

既然你已經在你的vuejs路由器配置history模式下配置使用mode: 'history'您可以考慮使用connect-history-api-fallback描述here: Example server configurations。

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)