Bottle框架静态文件路由异常：非根路径下无法加载静态资源

这个问题我之前也碰到过，核心原因就是相对路径在非根路由下的解析逻辑问题：当你访问http://localhost:4242/samples时，浏览器会把相对路径js/main.js自动拼接成/samples/js/main.js，但你的静态资源实际存在project/static/js/main.js，对应正确的请求路径应该是/js/main.js，所以才会出现加载失败的情况。

下面给你几个实用的解决办法：

1. 直接使用绝对路径引用静态资源 #

最简单直接的方式，把模板里的静态资源路径改成以/开头的绝对路径：

<script type="text/javascript" src="/js/main.js"></script>

这样不管当前页面处于哪个路由下，浏览器都会从网站根目录发起静态资源请求，你的/<filename:path>路由会正确匹配到project/static/下的目标文件。

2. 使用Bottle的url_for生成动态路径（推荐） #

如果以后你需要修改静态资源的路由前缀（比如改成/static/<filename:path>），用url_for能避免手动修改所有模板路径的麻烦。

确保你的模板支持Bottle默认的模板语法，然后把模板里的引用改成：

<script type="text/javascript" src="{{ url_for('send_static', filename='js/main.js') }}"></script>

这里send_static是你静态路由函数的名称，filename参数对应路由里的<filename:path>变量，Bottle会自动帮你生成正确的绝对路径。

额外验证：确认静态路由配置正确 #

你的静态路由代码是没问题的：

@app.get('/<filename:path>')
def send_static(filename):
    return static_file(filename, root='project/static/')

它会把/js/main.js正确映射到project/static/js/main.js，只要路径引用正确，就能正常返回文件。

试一下上面的方法，应该就能解决非根路径下静态文件加载失败的问题了！

内容的提问来源于stack exchange，提问作者Natalie Perret