在FastAPI中如何既使用JinJa2模版又使用Vue？

最新推荐文章于 2025-08-15 09:55:16 发布

原创

最新推荐文章于 2025-08-15 09:55:16 发布 · 977 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#fastapi #vue.js #flutter #前端 #javascript

本文介绍了如何在FastAPI中使用Jinja2时避免与Vue.js的标记语法冲突，通过修改Jinja2的默认标记和变量插值字符串，以及在Vue.js中相应设置，确保两者在模板中的有效协作。

前言

如果你在 FastAPI 中使用 Jinja2 模板引擎，默认使用了 {% ... %} 和 { { ... }} 这样的标记语法。
如果你需要在模板中使用 Vue.js 或其他类似的前端框架，可以通过修改 Jinja2 的标记语法避免冲突。

Jinja2 支持自定义标记语法，你可以在 FastAPI 中进行配置以修改默认的标记语法。以下是一种可行的方法

方法1:修改fastapi

由于本人用的fastapi-amis-admin框架，
下面的例子默认也使用这个框架的

from fastapi_amis_admin.admin import admin
from jinja2 import Environment, FileSystemLoader, select_autoescape
from fastapi.templating import Jinja2Templates


class MyJinja2Templates(Jinja2Templates):
    def __init__(self, directory: str) -> None:
        super().__init__(directory)

        # 配置 Jinja2 环境
        env = Environment(
            loader=FileSystemLoader(directory),
            autoescape=select_autoescape(['html', 'xml'])
        )
        env.block_start_string = '<%'
        env.block_end_string