0

在过去的一个半小时里，我一直在尝试调试我的一个项目。

该项目在本地运行良好。除了项目的根目录之一之外，路线通常不会远程工作。我在其他地方（所有其他路径）的浏览器中收到无法获取消息。

根据我的阅读理解，这可能与 vue-router 有关，并且可能是由我在根文件夹中创建的 server.js 文件引起的。问题可能与我的路线是动态的这一事实有关。

const express = require('express');
const serveStatic = require("serve-static")
const path = require('path');
app = express();
app.use(serveStatic(path.join(__dirname, 'dist')));
const port = process.env.PORT || 3000;
app.listen(port);

这也可能是由于我没有使用历史模式创建项目（尽管我很确定我做到了）。我知道我可能必须转到我的 webpack 配置文件来解决这个问题，但我想我没有。

编辑：顺便说一句，我的 VueJS 应用程序只是 PokéAPI 后端的前端。我没有自己构建后端。

4

1 回答 1

1

仅使用历史模式创建项目是不够的。您的浏览器正在尝试向text/html您导航到的路径发送 GET 请求。但是您的应用程序是一个单页应用程序，在 /public 中只有一个 index.html，因此您会收到 404 错误。它在vue-router 文档中：

要解决此问题，您需要做的就是向您的服务器添加一个简单的包罗万象的后备路由。如果 URL 不匹配任何静态资产，它应该提供与您的应用程序所在的 index.html 页面相同的页面。

对于 Node.js+express 设置，您可以使用connect-history-api-fallback包。

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

然后将您的 server.js 文件更改为：

const express = require('express');
var history = require('connect-history-api-fallback');
const serveStatic = require("serve-static")
const path = require('path');
app = express();
app.use(history());
app.use(serveStatic(path.join(__dirname, 'dist')));
const port = process.env.PORT || 3000;
app.listen(port);

如果您不想使用第三方软件包，您可以简单地执行以下操作：

const express = require('express');
const serveStatic = require("serve-static")
const path = require('path');
app = express();
app.use(serveStatic(path.join(__dirname, 'dist')));
app.get(/.*/, function (req, res) {
    res.sendFile(__dirname + "/dist/index.html");
});

const port = process.env.PORT || 3000;
app.listen(port);

但我建议使用该软件包，因为它可以处理一些边缘情况

于 2021-09-24T23:56:25.627 回答