谈谈为什么访问vue项目的任何路径都能打开主页面

墨蓝 2023-10-03 15:06 16阅读 0赞

我们在本地开发前端时，一般是执行 `npm run serve` 启动项目，控制台打印出如下日志：

App running at:
      - Local:   http://localhost:7007/
      - Network: http://192.168.0.105:7007/

怀着愉快的心情访问链接 http://localhost:7007/，浏览器也按我们预期显示了项目的主页面。  
当你不小心手误，访问链接时多敲了几个按键，链接变成这样：http://localhost:7007/asdf，一个回车，woc??，这怎么还能显示主页？！！你很确定项目没有一个名为 ‘/asdf’ 的路由，这也能行？开始反复尝试，试试访问 http://localhost:7007/qwer、http://localhost:7007/666666666666666666666…无一例外，访问任何路径都会显示主页面。这就很神奇了。（一肚子内心戏hhha~）

回到正题，**为什么访问vue项目的任何路径都能打开主页面？**  
要回答这个问题，首先要知道本地执行 `npm run serve` 时，到底干了什么。参考：[浅析npm run serve命令][npm run serve]  
直接上总结： **`npm run serve` 其实是在本地启动了个 `webpack-dev-server`服务器。**

不知道你发现没有，当我们打包部署到nginx时也会出现这个现象，nginx.conf的配置一般如下：

location / {
        
    	root   html;
    	try_files $uri $uri/ /index.html;
    }

通过对nginx配置的调试，发现是 try\_files指令实现了这个能力，它支持当获取不到任何文件时，将所有请求重定向到某个路径上去。上述配置最终会重定向到/index.html。具体细节可参考：[Nginx try\_files指令][Nginx try_files]  
知道了nginx也有这种情况，而且这个能力是通过一个内部的try\_files指令配置实现，我不禁在想，webpack-dev-server可以说就好比nginx，那应该也会有类似的配置吧。  
基于这个思路，我进行了一系列的探索。

1.  既然说到配置，那从项目的 `vue.config.js` 配置入手，我们发现 devServer 会作用于 webpack-dev-server，继续深入`devServer`；
2.  https://cli.vuejs.org/zh/config/\#devserver  
    文档提到 devServer 支持所有 webpack-dev-server 的选项配置。继续深入`webpack-dev-server` 的选项；
3.  https://webpack.docschina.org/configuration/dev-server/  
    重点关注静态资源的配置部分，一圈看下来，我发现 `staticOptions` 这个选项很可疑！它用于支持静态文件的高级选项。继续深入；
4.  https://webpack.docschina.org/configuration/dev-server/\#staticOptions  
    文档提到staticOptions会用于Express框架中的express.static API，所以可配置项自然就是 `express.static` 支持的值，继续深入
5.  http://expressjs.com/en/4x/api.html\#express.static  
    看了文档中相关的几个选项，我其实关注到了`fallthrough`，仅凭参数的定义是这样的：Let client errors fall-through as unhandled requests, otherwise forward a client error.，直译就是：让客户端错误作为未处理的请求发生，否则转发客户端错误。
6.  多次调试，得出结论。

我测试了各种配置，一步步调试…  
皇天不负有心人，真让我试了出来！主角就是 `fallthrough` 配置项。  
当`devServer.staticOptions.fallthrough`为`true`时，访问子路径会自动重定向到主页面！  
当`devServer.staticOptions.fallthrough`为`false`时，访问子路径会报错！

**直接上示例：**  
项目访问地址：http://localhost:7007/  
当我配置了 `devServer.staticOptions.fallthrough`= `true` 启动时，访问子路径会自动重定向到主页面！  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWFya2l4_size_17_color_FFFFFF_t_70_g_se_x_16]  
当我配置 `devServer.staticOptions.fallthrough`= `false` 启动时，访问子路径会报错！  
![在这里插入图片描述][2e167131add846f193b02230030d3ef9.png]

## 总结 ##

问：**为什么访问vue项目的任何路径都能打开主页面？**  
答：**因为 `devServer.staticOptions.fallthrough` 配置项，该配置默认为 `true`。当它为`true`时，访问子路径会自动重定向到主页面；当它为`false`时，访问子路径会报错！**  
在vue.config.js中实际配置长这样：

module.exports = {
        
      ...
      devServer: {
        
        staticOptions: {
        
          fallthrough: false
        },
      ...
    }

reference：  
[浅析npm run serve命令][npm run serve]  
[vue.config.js 官方文档][vue.config.js]  
[Webpack DevServer 官方文档][Webpack DevServer]  
[https://webpack.js.org/configuration/dev-server/\#staticoptions][https_webpack.js.org_configuration_dev-server_staticoptions]  
[http://expressjs.com/en/4x/api.html\#express.static][http_expressjs.com_en_4x_api.html_express.static]

[npm run serve]: https://markix.blog.csdn.net/article/details/119941900
[Nginx try_files]: https://markix.blog.csdn.net/article/details/119943742
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWFya2l4_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c78665be2c9b42f9b5468dc7bb83761e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbWFya2l4,size_17,color_FFFFFF,t_70,g_se,x_16
[2e167131add846f193b02230030d3ef9.png]: https://img-blog.csdnimg.cn/2e167131add846f193b02230030d3ef9.png
[vue.config.js]: https://cli.vuejs.org/zh/config/#vue-config-js
[Webpack DevServer]: https://webpack.docschina.org/configuration/dev-server/
[https_webpack.js.org_configuration_dev-server_staticoptions]: https://webpack.js.org/configuration/dev-server/#staticoptions
[http_expressjs.com_en_4x_api.html_express.static]: http://expressjs.com/en/4x/api.html#express.static