python - 关于flask模板中使用url_for() 和 vuejs 冲突的问题 ?

Question

由于vue的 {{}} 和jinja 冲突 所以我把 vue的改成了 {[]}

{{url_for('static', filename='{[id]}.jpg')}}

然后输出是

/static/%7B%5Bid%5D%7D.jpg

想了个很蠢的办法

{{ url_for('static', filename='{[id]}.jpg').replace('%7B%5B','{[').replace('%5D%7D',']}')}}

Answer 1

The first solution is to change the syntax of jinja2, but it is not recommended

env = Environment(variable_start_string="${", variable_end_string="}")

In this way, the variable separator of Jinja2 can be changed to "${}", and of course more settings can be made. But this is not only unaccustomed to the writers of server-side templates, but the more serious problem is that some editors for this kind of templates cannot recognize this symbol.

The best solution is to change the syntax of VUE. I define it like this in all projects. Just write it in front of the VUE code, so that there will be no problems with code migration

// ES6 模板字符串
Vue.config.delimiters = ['${', '}']
// 修改文本插值的定界符。

Vue.config.unsafeDelimiters = ['{!!', '!!}']
// 修改原生 HTML 插值的定界符。

Answer 2

You can strictly limit {{}} in JinJa to {{ xx }}. My projects are all set up like this

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