为 Vue.js 应用程序正确的 NodeJS 服务器答案

【问题标题】：Correct NodeJS server for Vue.js application为 Vue.js 应用程序正确的 NodeJS 服务器
【发布时间】：2018-06-26 09:10:20
【问题描述】：

我正在使用Vue.js 和vue-router，并希望通过Node.JS 提供静态文件。所以我用下面的代码创建了server.js：

// server.js
var express = require('express');

var path = require('path');

var serveStatic = require('serve-static');

app = express();
app.use(serveStatic(__dirname + "/dist"));

var port = process.env.PORT || 5000;

app.listen(port);

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

它似乎工作，但只有当我点击周围。如果我访问前。 my-url.com/some-path/another-path 失败了。

我错过了什么吗？

例如。我得到：

Cannot GET /cars 我在浏览器的地址栏中输入 www.my-domain.com/cars，但访问 www.my-domain.com 并点击汽车确实有效。

【问题讨论】：

您遇到了与Cant make router work 相同的问题。请阅读HTML5 History Mode。

标签： javascript node.js vue.js

【解决方案1】：

您需要设置服务器以将用户重定向到适当的服务器位置。请阅读Vue Router - HTML5 History Mode docs。

使用历史模式时，URL 看起来“正常”，例如 http://oursite.com/user/id。漂亮！

不过，问题来了：由于我们的应用是单页客户端端应用程序，如果没有适当的服务器配置，用户将获得如果他们直接访问http://oursite.com/user/id，则会出现 404 错误他们的浏览器。现在这很难看。

不用担心：要解决此问题，您只需添加一个简单的到您的服务器的全部后备路由。如果 URL 不匹配任何静态资产，它应该提供与您相同的 index.html 页面应用程序存在。美丽，再次！

您需要做的主要事情是让所有路由都指向根路由。或者，由于您使用的是 Express，因此您可以利用 connect-history-api-fallback 而 Vue Router docs recommend。

【讨论】：