Question

我有一个简单的＆＃34;你好世界＆＃34; VueJS app我试图开始工作：

<!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），它会加载并且＆＃34; Hello，world＆＃34;显示。

但是，如果我尝试使用相同的文件并通过python flask开发服务器或gunicorn提供服务，{{message}}会呈现空白。

有谁知道可能导致这种情况发生的原因？

Answer 1

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

在处理任何javascript之前，

render("mytemplate.html",message="Hello")将用“Hello”替换所有{{ message }}块...因为你没有定义消息它只是一个空字符串...你需要配置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>

通过Python Flask服务器

1 个答案: