Question

我正在使用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并单击汽车确实可以。

Answer 1

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

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

但是，这里有一个问题：由于我们的应用是一个单页客户端   端应用程序，如果没有正确的服务器配置，用户将获得一个   如果他们直接访问http://oursite.com/user/id，则会出现404错误   他们的浏览器。现在很丑。

不用担心：要解决此问题，您要做的就是添加一个简单的   捕获到您服务器的所有后备路由。如果网址不匹配   静态资产，它应与您的index.html页一样   应用程序存在。再次美丽！

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

适用于Vue.js应用程序的正确NodeJS服务器

1 个答案: