Vue + Jinja2两套模版与法冲突造成undefinedError

近期做一个自己使用的小工具，为了免去搭建前端工程的成本，用Jinja快速输出HTML骨架，CDN引入Vue做局部异步交互。在实践过程中出现如下的情况：本来计划人为输入一串编号，期望可以输出车辆基本信息，

html是这样写的

html 复制代码

<div class="search-box">
            <el-input
                v-model="orderNo"
                placeholder="请输入订单编号"
                style="width: 400px"
                @keyup.enter="handleQuery"
            ></el-input>
            <el-button
                type="primary"
                @click="handleQuery"
                :loading="loading"
                style="margin-left:10px"
            >提交查询</el-button>
        </div>

        <!-- 查询结果区域 -->
        <div v-if="showResult" style="margin-top:24px;">
            <el-card style="margin-bottom:16px;">
                <h3>🚲 车辆基础信息</h3>
                <el-descriptions border :column="3">
                    <el-descriptions-item label="bike_sn">{{bikeInfo.bike_sn}}</el-descriptions-item>
                    <el-descriptions-item label="ECU编号">{{bikeInfo.ecu_sn}}</el-descriptions-item>
                    <el-descriptions-item label="产品名称">{{bikeInfo.product_name}}</el-descriptions-item>
                    <el-descriptions-item label="固件版本">{{bikeInfo.firmware_version}}</el-descriptions-item>
                    <el-descriptions-item label="定位模块版本">{{bikeInfo.gnss_version}}</el-descriptions-item>
                </el-descriptions>
            </el-card>

一、问题分析

根因：Jinja2和Vue都存在{{}}语法，Jinja2在后端渲染阶段优先解析{{}}，还不管Vue的v-if，直接报变量未定义

换句话说：本来是Vue的插值与法（前端JS变量，等查询接口返回数据后渲染），Jinja2（后端模版引擎）优先解析{{}},页面一加载，Jinja2就去后端上下文中找bikeInfo，找不到就直接抛UndefinedError

解决办法：使用{%raw%}{%endraw%}告诉Jinja2不要解析Vue代码

加上{%raw%}{%endraw%}后，Jiaja2不会再碰里面，不会再报UndefinedError，等前端axios查询成功后Vue正常渲染。

修改后：

html 复制代码

{% raw %}
<!-- 查询结果区域 -->
<div v-if="showResult" style="margin-top:24px;">
  <el-card style="margin-bottom:16px;">
    <h3>🚲 车辆基础信息</h3>
    <el-descriptions border :column="3">
      <el-descriptions-item label="bike_sn">{{bikeInfo.bike_sn}}</el-descriptions-item>
      <el-descriptions-item label="ECU编号">{{bikeInfo.ecu_sn}}</el-descriptions-item>
      <el-descriptions-item label="产品名称">{{bikeInfo.product_name}}</el-descriptions-item>
      <el-descriptions-item label="固件版本">{{bikeInfo.firmware_version}}</el-descriptions-item>
      <el-descriptions-item label="定位模块版本">{{bikeInfo.gnss_version}}</el-descriptions-item>
    </el-descriptions>
  </el-card>
</div>
{% endraw %}

二、总结

对于小工具Jinja+vue这套组合可用，但是需要注意如下：

1、凡是Vue里面用的{{}}(前端异步查询出来的数据)，全部包{%raw%}{%endraw%}

2、凡是Jinja2后端渲染的变量（页面打开就渲染好的），放在raw外面。