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，并且应用程序中其他路线的导航由javascript本身处理。当您刷新或直接访问子路径时，这会导致失败。

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

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

将此中间件添加到您的快递

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)

刷新页面时，在heroku上部署的Vue + Webpack应用程序无法正常工作

1 个答案: