python http server运行Angular 单页面路由时重定向，解决404问题

news/2025/1/19 4:56:35/

问题

当Angular在本地ng server运行时候，可以顺利访问各级路由。
但是运行ng build后，在dist 路径下的打包好的额index.html 必须要在服务器下运行才能加载。
在服务器下我们第一次访问路由页面时是没有问题的，但是尝试刷新页面或手动输入路由地址，会发现页面变成了404，
https://i-blog.csdnimg.cn/direct/9032ef5db1064706beaa63f81d9f968c.png" alt="在这里插入图片描述" />
可以看到控制台报警 GET http://localhost:8004/b-component 404 (File not found), 我们在debug模式下是没有问题的，但是在打包服务器环境下运行就不行了。
有其他文章说使用hash 路由可以解决问题，但是hash路由毕竟不是主流的路由方式。
目前使用重定位路由解决。

解决方式

一创建文件

由于我们使用的是 python的 http server。所以我们创建python 脚本，src/server.py
代码如下：

python">import http.server
import socketserver
import os , reclass MyHttpRequestHandler(http.server.SimpleHTTPRequestHandler):def do_GET(self):# #方法一：根据路由地址判断# if self.path in ['/', '/a-component', '/b-component', '/c-component']:#     self.path = 'index.html'#方法二：根据文件后缀判断# 排除一些可能的无后缀静态资源# path 里面不含有 . 后缀的都认为是路由地址if re.match(r'^\/(?!robots\.txt|sitemap\.xml|manifest\.json).*', self.path) and '.' not in self.path:self.path = 'index.html'return http.server.SimpleHTTPRequestHandler.do_GET(self)handler_object = MyHttpRequestHandlerPORT = 8004
my_server = socketserver.TCPServer(("", PORT), handler_object)my_server.serve_forever()

代码里面，创建了一个自定义的 http.server
当页面请求到固定的路由地址的时候，将请求重定向到了index.html文件，因为我们打包后只有index.html文件，并没有其他的网页文件，所以请求的资源找不到。
这里简单有几种判断方式：

一：枚举所有的重定向地址，如果网页有改动的话需要动态更高
二：根据响应的规则，判断如果是路由地址的话，就重定向到index.html,此规则需要根据实际情况修改
三：在ng build 后，编写脚本，通过js或者python，读取src/app/app.routes.ts文件里面的所有路由地址，存入文件，然后在服务器脚本里面读取判断（未做）

配置拷贝

在angular.json 中添加"src/server.py"，这样当build的时候，会拷贝 server.py 在dist 的index.html的同级目录
https://i-blog.csdnimg.cn/direct/7d92333ec80646629c772c6f95895612.png" alt="在这里插入图片描述" />

打包

运行 ng build

运行服务器

进入打包目录后，运行 server.py

cd …/dist/btest/browser
python3 server.py

访问网页正常

https://i-blog.csdnimg.cn/direct/d6fc2b3f63f64c12b5367b735691f91e.png" alt="在这里插入图片描述" />