Flask 静态文件

任何一个完整的 Web 应用都离不开 CSS、JavaScript 和图片等静态资源。

本章介绍 Flask 如何管理和提供静态文件。

默认静态文件约定

Flask 默认从应用目录下的 static/ 文件夹提供静态文件。

你只需要创建这个文件夹并将静态资源放入其中即可：

myflaskapp/
├── app.py
├── templates/
│   └── index.html
└── static/
    ├── css/
    │   └── style.css          # 样式文件
    ├── js/
    │   └── main.js            # JavaScript 文件
    └── images/
        └── logo.png           # 图片文件

在模板中引用静态文件

不要硬编码路径，使用 url_for('static', filename='...') 生成静态文件的 URL。

这样做的好处是：即使将来应用挂载到子路径（如 /myapp），URL 也会自动调整。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RUNOOB Flask 教程</title>

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">


<link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
</head>
<body>

<img src="{{ url_for('static', filename='images/logo.png') }}" alt="RUNOOB Logo" width="200">

<h1>欢迎来到 RUNOOB</h1>
<p>这是一个使用 Flask 构建的 Web 应用。</p>


<script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>

自定义静态文件路径

如果不想使用默认的 static/ 文件夹，可以在创建 Flask 应用时自定义：

实例

from flask import Flask

# static_folder：服务器上的文件夹路径
# static_url_path：URL 中的访问路径
app = Flask(__name__,
static_folder="public", # 静态文件放在 public/ 目录下
static_url_path="/assets") # 通过 /assets 路径访问
# 此时访问 /assets/css/style.css 对应文件 public/css/style.css

参数	默认值	说明
static_folder	"static"	存放静态文件的本地文件夹
static_url_path	None（使用 static_folder 的名称）	静态文件对外暴露的 URL 前缀

CSS 文件示例

创建一个基本样式文件，让页面看起来更专业：

实例

/* 文件路径：static/css/style.css */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
color: #333;
}

h1 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}

nav {
background: #f8f9fa;
padding: 10px;
border-radius: 4px;
margin-bottom: 20px;
}

nav a {
color: #3498db;
text-decoration: none;
margin-right: 15px;
}

footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #eee;
color: #999;
font-size: 14px;
}

访问 http://127.0.0.1:5000/，效果如下：

开发与生产环境的区别

Flask 内置的静态文件服务只适合开发环境。
在生产环境中，应该由 Nginx、Apache 等专业 Web 服务器直接处理静态文件，这样效率远高于通过 Python 代码来服务。
生产部署的详细内容将在后续章节中介绍。

返回顶部

菜鸟教程