刷新页面后，无法在heroku上部署Vue + Webpack应用程序

问题描述

我使用带有Webpack模板的vue-cli生成了一个vue应用程序，并使用本指南.我能够毫无问题地运行它，但是当我刷新页面或直接访问子路由时，它失败了.

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

我的vue路由器配置

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

推荐答案

Spa通常位​​于一个index.html上，并且应用程序中其他路线的导航由javascript本身处理.刷新或直接访问子路由时，这会导致失败.

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.

由于使用mode: 'history'在vuejs路由器配置中配置了history模式，因此可以考虑使用此处所述:noreferrer> connect-history-api-fallback 服务器配置.

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. 将此中间件添加到快递中

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)

这篇关于刷新页面后，无法在heroku上部署Vue + Webpack应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！