前言

最近比较热衷于Flask+Vue+Mysql的微服务架构来开发安全工具，其优点是实现方便快捷。不过在研究过程中发现有时写的Vue模板渲染失败，出现页面空白的情况。经过排查发现是 Jinjia2 与 Vue 都会解析 {{}} 的问题，且当使用了服务端 Jinjia2 解析 {{}} 时，可能导致 Vue 无法渲染 {{}} 从而获取不到后端传递的参数。

问题过程

例如从数据库取数据后由后端给前端传参

image-20251031113925001

前端使用 Vue 渲染模板

image-20251031114031468

这时启动 Flask 后发现后端一直提示 “r” undefined，且接口响应 500，前端页面空白 Vue 没有正常渲染

image-20251031114305839

解决分析

这里是因为 Jinjia2 先把 {{ r.ts }} 解析了，浏览器没有收到完整的 {{ r.ts }} 导致 Vue 渲染出错。要解决该问题需要让 Jinjia2 不要解析 {{}}，将其原样发给 Vue。

需要给 Vue 应用区块加上

{% row %}<div id="app">...</div>{% endrow %}

image-20251031114658446

这样 Vue 就能收到传参并渲染前端模板。