通过 Python Flask 服务器提供服务时，Vue 应用程序不加载答案

【问题标题】：Vue app doesn't load when served through Python Flask server通过 Python Flask 服务器提供服务时，Vue 应用程序不加载
【发布时间】：2017-05-08 00:27:37
【问题描述】：

我正在尝试使用一个简单的“hello world”VueJS 应用程序：

<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="https://unpkg.com/vue"></script>    
</head>
<body>    
  <div id="app">
    Message: {{ message }}
  </div>    
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "Hello, world"
    }
  });
</script>  
</body>
</html>

当我在浏览器中加载这个文件时，从我的本地磁盘（即：file:///home/user/vue-project/index.html），它加载并显示“Hello, world”。

但是，如果我尝试获取相同的文件并通过 python 烧瓶开发服务器或 gunicorn 提供它，{{message}} 将呈现空白。

有谁知道导致这种情况发生的原因是什么？

【问题讨论】：

您是否忘记了 gunicorn 使用线程？变量并不总是通过 gunicorn 共享！
{{ 和}} 被flask 用于其可变渲染......您需要配置vue 以使用替代分隔符，如[[ message ]]

标签： python flask vuejs2

【解决方案1】：

flask 使用 jinja2 渲染其变量，jinja2 使用 {{ variable }} 作为其解析分隔符

render("mytemplate.html",message="Hello") 将在处理任何 javascript 之前将所有 {{ message }} 块替换为“Hello”...因为您没有定义消息，它只是一个空字符串...您需要配置 vue 以使用替代分隔符 (我用[[ message ]])

<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="https://unpkg.com/vue"></script>    
</head>
<body>    
  <div id="app">
    Message: [[ message ]]
  </div>    
<script>
  var vm = new Vue({
    el: "#app",
    delimiters : ['[[', ']]'],
    data: {
      message: "Hello, world"
    }
  });
</script>  
</body>
</html>

【讨论】：

谢谢！顺便提一下，分隔符应该设置为：delimiters: ['[[', ']]']