<div id="readability-page-1" class="page"><div><p>간단하게 만든 앱에서, 백엔드는 <code>Flask</code>, 프론트엔드는 <code>Vue.js</code>로 구성을 했는데, 빌드해서 templates에 넣으니, 페이지가 제대로 안나오는 문제가 있었다.</p>
<h2 id="solution"><a href="#solution" aria-label="solution permalink"></a>Solution</h2>
<ol>
<li>Vue 빌드 후 빌드 결과물 flask templates 폴더로 복사</li>
<li>
<p>Flask에서 static_folder 설정</p>
<div data-language="python"><pre><code>app <span>=</span> Flask<span>(</span>__name__<span>,</span> static_folder<span>=</span><span>"./templates"</span><span>)</span></code></pre></div>
</li>
<li>
<p>index.html에서 main.js를 static folder에서 load하도록 변경</p>
<div data-language="html"><pre><code><span><span><span>&lt;</span>script</span> <span>type</span><span><span>=</span><span>"</span>text/javascript<span>"</span></span> <span>src</span><span><span>=</span><span>"</span>{{ url_for(<span>'</span>static<span>'</span>, filename=<span>'</span>main.js<span>'</span>) }}<span>"</span></span><span>&gt;</span></span><span></span><span><span><span>&lt;/</span>script</span><span>&gt;</span></span><span><span><span>&lt;/</span>body</span><span>&gt;</span></span></code></pre></div>
</li>
</ol>
<h2 id="사족"><a href="#%EC%82%AC%EC%A1%B1" aria-label="사족 permalink"></a>사족</h2>
<div data-language="text"><pre><code>127.0.0.1 - - [09/May/2019 10:04:14] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [09/May/2019 10:04:14] "GET /main.js HTTP/1.1" 404 -</code></pre></div>
<p>Flask 로그 보고 왜 안되는지 깨달았당.</p></div></div>

cereme.dev

Sang yun Pae

간단하게 만든 앱에서, 백엔드는 Flask, 프론트엔드는 Vue.js로 구성을 했는데, 빌드해서 templates에 넣으니, 페이지가 제대로 안나오는 문제가 있었다.
Solution
Vue 빌드 후 빌드 결과물 flask templates 폴더로 복사
Flask에서 static_folder 설정
app = Flask(__name__, static_folder="./templates")
index.html에서 main.js를 static folder에서 load하도록 변경
<script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script></body>
사족
127.0.0.1 - - [09/May/2019 10:04:14] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [09/May/2019 10:04:14] "GET /main.js HTTP/1.1" 404 -
Flask 로그 보고 왜 안되는지 깨달았당.

Flask에서 Vue.js 템플릿 사용하기

댓글