HTML5 历史模式错误（无法获取 /page）答案

【问题标题】：HTML5 History Mode error (Cannot Get /page)HTML5 历史模式错误（无法获取 /page）
【发布时间】：2020-03-27 14:27:49
【问题描述】：

我在我的网站中实现了 Vue-Router 以帮助进行 SEO，但现在我的网站中的每个 Vue 页面都收到错误“无法获取 /”。

奇怪的是，这只发生在我刷新主页以外的页面时。我使用导航栏导航到这些网站页面没有问题，但是当我尝试刷新其中任何一个页面时，我得到了错误。

该应用程序在本地运行良好，页面刷新也很好，但部署在 Heroku 上，我收到此错误。请记住，我的所有路线都从哈希模式切换到了 HTML5 历史模式。最后，我的网站存在这些问题，但仍会在桌面浏览器上加载主页......它根本不会在移动设备上加载。

这是该网站的链接：https://autosnapwebsite.herokuapp.com/

请随意查看我的文件：https://github.com/ddg5565/AutosnapWebsite

我已经尝试了所有可以在网上找到的解决方案，所以我真的需要一些帮助来诊断这个问题。

【问题讨论】：

这是由于您的网络服务器配置。你使用的是 Apache2 还是 Nginx。
我不确定。我知道我正在使用 Express 和 Node.js，我相信这是我正在运行的服务器。
我查看了这个页面：router.vuejs.org/guide/essentials/… 在 Express using Node.js 部分下。我已尝试实施此解决方案，但到目前为止还没有运气。

标签： node.js vue.js

【解决方案1】：

看来我需要对我的 server.js 文件进行一些调整。对于遇到此问题的任何人，这是有效的最终版本：

 // server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
var app = express();
var history = require('connect-history-api-fallback');

app.use(history({
  // verbose: true
}));

app.use(express.static(__dirname + '/dist'));

// var port = process.env.PORT || 8080;

app.set('port', (process.env.PORT || 8080));


// app.listen(port);

app.listen(app.get('port'), () => {
  console.log(`ENV: ${process.env.NODE_ENV}`);
  console.log(`Derp is running at localhost: ${app.get('port')}`);
});

// console.log('server started '+ port);

【讨论】：