使用Bottle框架时外部JS与CSS文件无法加载的问题咨询

嘿，我来帮你搞定这个静态资源加载失败的问题～ 其实核心原因很简单：Bottle框架默认不会自动处理静态文件请求，得我们手动配置路由告诉它去哪里找这些文件。下面是具体的解决步骤：

1. 先整理清晰的项目结构（推荐） #

首先把静态文件放到专门的文件夹里，这样管理起来更方便，比如在项目根目录下创建一个static文件夹，再细分css和js子文件夹，结构大概是这样：

你的项目根目录/
├── testBottle.py       # 你的Bottle主文件
├── views/
│   └── index.html      # 你的HTML页面
└── static/
    ├── css/
    │   └── 你的样式文件.css
    └── js/
        └── 你的脚本文件.js

（注：Bottle默认会从views文件夹加载模板，所以index.html放在这里是没问题的）

2. 在testBottle.py中添加静态文件路由 #

你需要导入Bottle的static_file函数，然后添加一个路由来处理静态资源请求：

import bottle
import pandas as pd
from matplotlib import pyplot as plt
import numpy as np
from scipy import optimize as opt
# 新增：导入static_file
from bottle import static_file

# 新增：静态文件路由
@bottle.route('/static/<filepath:path>')
def server_static(filepath):
    # root参数指定静态文件的根目录，这里对应我们创建的static文件夹
    return static_file(filepath, root='./static')

# 你的其他代码（比如generate函数、首页路由等）
def generate(code, year,week):
    kion = pd.read_csv(r'D:/a.csv')
    kion.head()
    Px = np.arange(0, len(kion), 1)
    Py = kion['temp']
    plt.plot(Px, Py)
    res = opt.curve_fit(fit_func, Px, Py)
    a = res[0][0]
    b = ... # 你的后续代码

# 别忘了添加首页路由，返回index.html
@bottle.route('/')
def index():
    return bottle.template('index.html')

# 启动服务
if __name__ == '__main__':
    bottle.run(host='localhost', port=8080, debug=True)

3. 修改index.html中的资源引用路径 #

把原来的相对路径改成我们配置的静态路由路径，比如：

<!-- 原来的CSS引用可能是这样的 -->
<!-- <link rel="stylesheet" href="style.css"> -->
<!-- 修改成这样 -->
<link rel="stylesheet" href="/static/css/你的样式文件.css">

<!-- 原来的JS引用可能是这样的 -->
<!-- <script src="script.js"></script> -->
<!-- 修改成这样 -->
<script src="/static/js/你的脚本文件.js"></script>

额外注意事项 #

• 确保文件路径和文件名完全正确，尤其是大小写（Linux/macOS系统对大小写敏感，Windows虽然不敏感，但最好统一）
• 如果你的静态文件不在项目根目录的static文件夹，只需要修改server_static函数里的root参数为对应的绝对路径就行，比如root='D:/my_project/static_files'
• 启动Bottle服务后，访问http://localhost:8080，打开浏览器开发者工具的网络面板，看看静态资源的请求状态，如果是200就说明加载成功了～

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