首页 > 编程语言> > 通过Python Flask服务器提供服务时,Vue应用无法加载

通过Python Flask服务器提供服务时,Vue应用无法加载

2019-10-26 01:55:47 作者：互联网

我正在尝试使用一个简单的“ 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 flask开发服务器或gunicorn提供该文件,则{{message}}会变为空白.

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

解决方法:

flask使用jinja2呈现其变量,而jinja2使用{{variable}}作为其解析定界符

render(“ mytemplate.html”,message =“ Hello”)会在处理任何JavaScript之前将所有{{message}}块替换为“ 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>

标签：flask,vuejs2,python
来源： https://codeday.me/bug/20191026/1933199.html