heroku - 刷新页面时，Vue + Webpack 应用程序部署在 heroku 上不起作用

Question

我使用带有 webpack 模板的 vue-cli 生成了一个 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

水疗中心通常有一个 index.html 并且到应用程序中其他路线的导航由 javascript 本身处理。导致刷新或直接访问子路由失败。

由于您使用 mode: 'history' 在 vuejs 路由器配置中配置了 history 模式，因此您可以考虑使用 connect-history-api-fallback如所述here: Example server configurations .

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

2. 将这个中间件添加到您的 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)