防止 vue-cli (webpack) 获取所有非文件 GET 路由-sails 环境答案

【问题标题】：prevent vue-cli (webpack) from picking up all non-file GET routes - sails environment防止 vue-cli (webpack) 获取所有非文件 GET 路由-sails 环境
【发布时间】：2017-11-26 08:14:16
【问题描述】：

当使用vue init webpack project-name创建一个Vue项目，设置它，最后调用npm run dev你可以在localhost:8080上打开你的浏览器并看到默认页面。事实上，您几乎可以导航到任何“非文件”路径，例如 /a/b/c-d，而 Vue 仍然会选择它。它似乎没有选择的唯一路径是以.* 结尾的路径，以及仅以. 结尾的路径。例如/a.js、/b.、/c/d.png

我正在尝试将 Vue 与 REST 后端（Sails.js，使用 sails-generate-new-webpack-vue）一起使用，这意味着我将拥有看起来像 GET /api/users 和类似的路由。使用sails 生成器，会生成一个通用的webpack Vue 项目，并更改一些配置文件，以便将webpack 的输出放到sails 使用的.tmp 目录中，以便实际提供文件。

我尝试查看源文件并注意到通常npm run dev 调用node build/dev-server.js，与package.json 一样，但在那里我看不到它实际上将所有内容重定向到单个html 文件的位置。这已经很有帮助了，但经过快速检查后，我注意到在我的sails 设置中，该文件实际上从未使用过（插入了一个从未运行过的简单console.log）。

Vue 如何（或者更确切地说，在哪里）将所有“非文件”路由重定向到单个路径？

一旦我知道它的位置和方式，这可能会变得很清楚，但除此之外，我该如何更改它并且只让 Vue 选择一组特定的 express-route-like 路径？如，理想情况下，我会让它选择诸如 /:username/profile 之类的路线

答案不一定要针对风帆，但如果您有其他信息，那可能真的会有所帮助。

编辑：重新创建的步骤

npm i -g sails sails-generate-new-webpack-vue vue-cli
echo "{\"generators\":{\"modules\":{\"new\":\"sails-generate-new-webpack-vue\"}}}" > .sailsrc
sails new test-project

编辑：原来它是特定于帆的

事实证明，让 Vue 选择每条路线的原因在于 build/dev-server.js，这是历史回退 API。太好了，我希望能帮助人们寻找答案，但是通过这种特定的设置，该文件从未真正使用过，而且我对正在使用的内容一无所知。我确实意识到使用我提到的 npm 包的人很少，但是如果有人可以看一下，那将非常有帮助！

编辑：找到停用它的确切位置

不得不查看大量源代码，看到webpack/node_modules/sails-hook-webpack-vue/index.js，只需要注释掉第114和120行

【问题讨论】：

标签： node.js express webpack vue.js sails.js

【解决方案1】：

如我所见，您不需要 webpack 模板提供的额外服务器配置。我会建议你切换到 webpack-simple 模板。

开发服务器位于构建文件夹中，名为 dev-server.js 的文件。它使用 express 设置本地服务器来提供您的文件。

如果您设置自己的服务器来提供文件，请记住将 build*.js 文件提供给服务器。

【讨论】：

【解决方案2】：

终于明白了：D

问题在于history-api-fallback middleware，在普通的 Vue 项目中，它通常可以在build/dev-server.js 中切换。但在我的设置下，它最终被引入到本地 webpack/node_modules/sails-hook-webpack-vue/index.js 的第 114 行和第 120 行：

sails.config.http.middleware.historyFallback = historyFallback();
...
sails.config.http.middleware.order.unshift('historyFallback');

你只需要注释掉。

然后您可以在config/routes.js 中根据需要指示您的路线，并使其指向index.html

【讨论】：