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

前言

如果你在 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 = '%>'
        env.variable_start_string = '<<'
        env.variable_end_string = '>>'

        self.env = env


class Jinja2Admin(admin.TemplateAdmin):
    templates = MyJinja2Templates(directory="templates")

将标记语法的起始和结束字符串分别修改为 <% 和 %>，并将变量插值的起始和结束字符串分别修改为 << 和 >>。然后在模板文件中使用了新的标记语法。

这样就避免了 Jinja2 和 Vue.js 的标记语法冲突，可以正常使用 Vue.js 的语法了。

方法2: 修改vue

这里提供两种方案
1：

const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            },
            delimiters: ['[[', ']]']
        });

const app = Vue.createApp(...)
app.config.compilerOptions.delimiters = ['[[', ']]']
app.mount("#app")