想做些簡單的 Web 工具，首先想到的是 Flask + Vue.js, 當然可以完全用 Flask 自己的頁面模板 Jinja2, 但一個網站項目不能享受到像 Vue.js, React 類似框架的靈活性真是太可惜了。於是 Flask 只專注於 API, 頁面邏輯全用 Vue.js 的組合就成了我的首選，Flask 方面還能進一步選擇 FlaskRESTful 框架。還需做得更漂亮的話，CSS 框架可選擇 Bootstrap 或與 Vue 緊密集成的 BootstrapVue, 這是後話。
本文主要參考 Flask和Vue.js構建全棧單頁面web應用【通過Flask開發RESTful API】的前部分，英文原文在這裏 Developing a Single Page App with Flask and Vue.js。
開發過程中我們可以保持 Flask 和 Vue.js 爲單獨的兩個項目，並啓動各自的服務，比如 Flask 是 http://localhost:5000, Vue.js 項目通過 npm run serve 啓動在 http://localhost:8080，藉助於 node js 的功能，修改 Vue.js 項目的內容能夠自動刷新網頁。要是開發中把靜態文件全放在 Flask 項目中，那麼任何對靜態文件的修改都必須重啓 Flask 服務。雖然 Debug 模式啓動的 Flask 在看到它的目錄中有任何修改時也能自動重啓，但對靜態文件的修改重啓 Flask 沒這個必要性。
但部署時需進一步整合，最終只需要啓動 Flask 服務，而無須兩個，方便部署。如果是以 Docker 容器的方式發佈，使用 docker-compose 來編排兩個容器來發布也還算不錯。更專業的部署方式應該是 Vue.js 的靜態內容放到專門的 Web 服務器，如 Apache/Nginx 中，Flask 也通過 wsgi 與 Web 服務器集成起來。 閱讀全文 >>