Nginx 正确处理带哈希值的 React 应用 index.html 文件
React 应用构建后，index.html 文件通常包含一个哈希值，例如 index.a1b2c3d4.html。 标准的 Nginx 配置无法直接处理这种情况。本文介绍如何使用 Nginx 配置，优雅地处理这些带哈希值的 index 文件。
通常，我们会看到这样的 Nginx 配置：
location / { root /path/to/your/app; index index.html; try_files $uri $uri/ /index.html;}
但这对于 index.a1b2c3d4.html 这样的文件无效。我们需要用到正则表达式和命名 location。
改进后的 Nginx 配置如下：
立即学习“前端免费学习笔记（深入）”；
server { listen 80; server_name your_domain.com; # 替换为你的域名 location / { root /path/to/your/app; # 替换为你的应用根目录 index index.html; try_files $uri $uri/ @hashed; } location @hashed { rewrite ^/(.*)$ /$1/index.[0-9a-zA-Z]+.html break; try_files $uri =404; }}
这段配置做了以下改进：
try_files $uri $uri/ @hashed;: 首先尝试查找请求的 URI。如果找不到，则跳转到名为 @hashed 的 location。location @hashed: 这是一个命名 location，用于处理哈希值。*`rewrite ^/(.)$ /$1/index.[0-9a-zA-Z]+.html break;**: 使用正则表达式index.[0-9a-zA-Z]+.html匹配所有以index.开头，后跟任意字母数字组合，最后以.html结尾的文件。break` 指令阻止后续的处理。try_files $uri =404;: 如果仍然找不到文件，返回 404 错误。
通过这个配置，Nginx 将正确地将所有请求路由到正确的 index.html 文件，无论其是否包含哈希值。 记得将 /path/to/your/app 和 your_domain.com 替换成你的实际路径和域名。
以上就是Nginx 如何配置指向带有哈希值的 index.html 文件？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1564949.html
微信扫一扫 
支付宝扫一扫 
