Vue+Webpack app deploy on heroku not working when page is refreshed

问题

I generated a vue app using vue-cli with webpack template and deployed it to heroku using this guide. I was able to run it without problem but when I refresh the page, or I accessed a sub route directly it fails.

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

My vue router config

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

回答1:

Spa's generally have on one index.html and the navigation to other routes in the app is handled by javascript itself. This is causing failure when you refresh or directly access a sub-route.

Since you have history mode configured in your vuejs router configuration using mode: 'history' you can consider using connect-history-api-fallback as described here: Example server configurations.

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

2. Add this middleware to your express

   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) 
   

来源：https://stackoverflow.com/questions/44982580/vuewebpack-app-deploy-on-heroku-not-working-when-page-is-refreshed