Flask是Python下的微框架，Vue.js則是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架。Flask和Vue.js結(jié)合使用的好處在于，前端Vue.js可以快速的開(kāi)發(fā)出極具交互性、快速響應(yīng)的前端頁(yè)面，而后臺(tái)Flask則可以快速實(shí)現(xiàn)服務(wù)端API，完成前后端的交互。而為了便于部署和發(fā)布，這里介紹如何對(duì)Flask+Vue.js進(jìn)行打包。
我們首先需要安裝Node.js和npm。在安裝完成之后，進(jìn)入到Vue.js的項(xiàng)目根目錄下，執(zhí)行命令：
npm run build這個(gè)命令可以將Vue.js的代碼打包生成executable javascripts和interface stylesheets。Vue.js生成的這些文件可以放到使用Flask進(jìn)行服務(wù)的product code中。
接下來(lái)我們需要將Flask和Vue.js打包成一個(gè)整體。在Flask模板中引入Vue.js。我們需要在Flask中將生成的js和css文件加入到開(kāi)發(fā)的template文件夾下，如下：
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
</head>
<body>
<div id="app"></div>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>其中，'css/app.css'和'js/app.js'都是通過(guò)npm run build打包生成的。
最后，在Flask中啟動(dòng)應(yīng)用，我們即可在瀏覽器中看到Vue.js生成的頁(yè)面。Flask和Vue.js打包完畢！