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

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

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

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

将此中间件添加到您的 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)

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

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

heroku

vue-router

vuejs2