前言
如果你在 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")