节点 webpack 开发服务器在 vuejs 项目中失败“无法获取 /”

Posted 2023-02-22

【中文标题】节点 webpack 开发服务器在 vuejs 项目中失败“无法获取 /”

【英文标题】：Node webpack dev server failing 'Cannot GET /' in vuejs project

【发布时间】：2016-11-09 04:29:29

【问题描述】：

当我通过 webpack 运行我的节点开发服务器时，我的浏览器上打印了一条超级无用的消息“无法获取 /”。我正在使用以下内容构建 Vuejs 应用程序：

VueJs 的结构由 Vue Template 指定，我的节点脚本与默认的 commands 相同 基于Vue Loader的Webpack配置 通过Vue Router处理的路由

我知道这不是什么大问题，但知道是什么引发了这个错误（Node？Webpack？Vue 路由器？）它会为我指明正确的方向，非常感谢。

【参考方案1】：

节点抛出错误并确保您的 vue 路由器配置正确，无法 GET 仅表示您没有为您的 url 分配视图，例如我们使用的快递 app.use('/', 你的路线) 在连接时我们使用 app.get 或 app.post 它只是说没有分配给该 url 的内容/视图。

【讨论】：

我刚刚对拉取请求进行了最后的润色。原来这与我正在使用的 webpack 配置模板的路径有关：github.com/vuejs-templates/webpack/pull/188

很高兴你知道了

【参考方案2】：

事实证明这是我使用的 vuejs webpack 模板的问题：https://github.com/vuejs-templates/webpack

在开发服务器配置中使用了构建路径。

提出这个拉取请求来解决这个问题：https://github.com/vuejs-templates/webpack/pull/188#issuecomment-230968416

【参考方案3】：

我发现自己也遇到了同样的问题。在我的例子中，它与 Vue.js 中的 Express 的使用有关。所以我会留下我的解决方案，以防有人发现它有用

我添加了这段代码来处理对我的index.html 文件的调用

app.route('/*')
    .get(function(req, res) 
          res.sendFile(path.join(__dirname + '/dist/index.html'));
);

module.exports = app;

【讨论】：

var path = require('path') 很清楚 - 谢谢！这解决了它?

对于任何对此有误解的人，它需要放在你的 server.js 中（或等效的，无论你在哪里导入 express）。如果您在浏览器窗口中看到错误，您可能需要像提到的@user1274820 一样导入path。这解决了我的问题！

【参考方案4】：

我在 dev 中运行我的应用程序时遇到了这个问题。将此添加到我的 webpack.dev.config 文件的 devServer 有助于：

historyApiFallback: true

Jezperp here 的回答。

【参考方案5】：

如果您使用 express，请检查您是否有此行：

app.use(express.static('static'));

并且那个“静态”与你的 vue.config.js 中指定的文件夹匹配

outputDir: path.resolve("../Server/static")

【参考方案6】：

如果您在使用 Vite 时遇到此问题，请确保您在 package.json 脚本中只运行了 vite，不是 vite preview

【讨论】：

这对我有帮助 @walnut_salami

感谢您的帮助！

顺便说一句，要使vite preview 工作，您首先需要运行vite build。