Falsk模板Jinja2与Vue冲突解决方案

申明禁止 Jinja 加载的区域

{% verbatim myblock %} {% endverbatim myblock %}

使用 Jinja2 的 raw 标签标记 JavaScript 模板代码

{% raw %}
<div id="app">
    {{ js_var }}
</div>
{% endraw %}

修改 Jinja2 的语法定界符号

from flask import Flask

app = Flask(__name__)

app.jinja_env.block_start_string = '(%'  # 修改块开始符号
app.jinja_env.block_end_string = '%)'  # 修改块结束符号
app.jinja_env.variable_start_string = '(('  # 修改变量开始符号
app.jinja_env.variable_end_string = '))'  # 修改变量结束符号
app.jinja_env.comment_start_string = '(#'  # 修改注释开始符号
app.jinja_env.comment_end_string = '#)'  # 修改注释结束符号

修改 JavaScript 模板的语法定界符号

var app = new Vue({
	delimiters:['{[', ']}']
})

折中方案

如果你觉得使用 raw 标签太麻烦，而修改语法定界符又不习惯，这里还有一个折中方法：两边都使用双花括号作为定界符，但根据花括号内部是否添加空格来进行区分。

具体来说，对 Jinja2 变量使用 Jinja2 标准语法，也就是使用 。实际示例如下：

{{ jinja_var }}

而 JavaScript 模板使用没有空格的双花括号，即：

{{js_var}}

这是一种更适合心细的懒人的方法，如果是团队项目，可能会对不习惯这种用法的人造成困扰，记得在文档里注明。这种方式只需要修改 Jinja2 定界符：

app.jinja_env.variable_start_string = '{{ '
app.jinja_env.variable_end_string = ' }}'

另外需要注意的是，如果你使用了其他 Flask 扩展的内置 Jinja2 模板或宏，需要确保它们都使用了包含空格的标准 Jinja2 语法。举例来说，用来方便集成 Bootstrap 的 Flask-Bootstrap 就没法使用，需要使用替代的 Bootstrap-Flask。其他扩展，比如 Flask-Admin，Flask-Security 暂未测试，欢迎了解的同学反馈兼容情况。