반응형
Python Flask 서버를 통해 Vue 앱이 로드되지 않음
심플한 "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}}이(가) 공백이 됩니다.
그 원인이 무엇인지 아는 사람 있나요?
플라스크는 다음을 사용하는 jinja2로 변수를 렌더링합니다.{{ variable }}해석 딜리미터로서
render("mytemplate.html",message="Hello")모든 것을 대체하다{{ message }}javascript가 처리되기 전에 "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>
언급URL : https://stackoverflow.com/questions/43838135/vue-app-doesnt-load-when-served-through-python-flask-server
반응형
'programing' 카테고리의 다른 글
| 마운트된 이벤트에서 vue 구성 요소 데이터 멤버에 값을 할당하는 방법 (0) | 2022.09.01 |
|---|---|
| [Vue warn] :생성된 후크 오류: "TypeError: 정의되지 않은 속성을 설정할 수 없습니다" (0) | 2022.09.01 |
| vuejs의 다른 컴포넌트 내부에 있는 입력에 초점을 맞추고 있습니까? (0) | 2022.09.01 |
| maven jar-with-dependencies의 이름을 변경할 수 있습니까? (0) | 2022.09.01 |
| Azure AD에서 VueJS 앱을 인증하려면 어떻게 해야 합니까? (0) | 2022.09.01 |