当页面刷新时，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)