導言我們的Vue2.0應用：簡讀-微信公眾號RSS，即將進入后端開發。

Vue+Flask作為輕量級前端、后端框架，非常適合組合起來快速開發。一個是js，一個是Python。

Bonus:

可以完美實現跨域調試，不需要JSONP，也不需要服務器端設置'Access-Control-Allow-Origin' -> Vue 2.0 起步(4) 輕量級后端Flask用戶認證 - 微信公眾號RSS

問題

作為一個全(ku)能(bi)的全棧開發人員，前、后端往往是一個人搞定。開發過程中最常見問題是，每次前端修改了html/js，一般先要用webpack編譯，再手工復制編譯后文件到Flask的工作目錄，后端框架才能使用更新后html/js。

那么，對于追求極致效率的人，如何完美實現：前后端共用代碼同步更新呢？

解決注意：以下是以初始化模板為“vue init webpack ”為例

觀察Vue開發時，webpack熱替換的編譯代碼中，含有以下文件：app.js?(包含打包后的所有HTML、js、CSS文件)

__webpack_hmr?(webpack熱替換文件)

那我們把這些文件讓 Flask引用一下Vue http://localhost:8080 的這兩個文件，不就可以實現同步更新了嗎？如果初始化模板“vue init webpack-simple ”，則替換app.js為dist/build.js

實施新建兩個目錄，存放Flask的模板和靜態文件：/static//templates/Flask 最簡后臺服務器程序(10行代碼)：#?/app.py#!/usr/bin/env?python#?encoding:?utf-8from?flask?import?Flask,?render_template,?redirect

app?=?Flask(__name__)@app.route('/')def?index():

return?render_template('index.html')@app.route('/__webpack_hmr')def?npm():

return?redirect('http://localhost:8080/__webpack_hmr')if?__name__?==?'__main__':

app.run(debug=True)復制Vue項目/index.html，到Flask模板文件夾/templates下面，然后添加引用 app.js：如果初始化模板“vue init webpack-simple ”，則替換app.js為dist/build.js#?/templates/index.htmlhtml>

簡讀?-?公眾號RSS

大家要問了，/templates/index.html里，不僅有 app.js，還有其它的幾行？

是的，等我一一道來：是引用font-awesome圖標，如果你沒有用到圖標CSS，也可以忽略這一行

同時，復制/node_modules/font-awesome/整個文件夾，到Flask的靜態文件夾/static下面：/static/font-awesome/1.1.js、2.2.js...，這些文件是vue-router里，如果定義了路由懶加載，那除了app.js以外，webpack編譯時，會多出這些類似的文件，大家用 npm run build可以看到產生了哪些懶加載js，然后把它們加入到 /templates/index.html里面去：

同步更新

現在，同時運行前端、后端開發環境：npm?run?devpython?app.py

打開兩個瀏覽器：Vue.js:?http://locahost:8080Flask:?http://localhost:5000

Vue、Flask同步更新前

這時，我們更新一下，比如前端框架里，Home.vue代碼中標題的名字：#?/src/components/Home.vue

簡?讀(Changed?in?Vue

。。。??????

是不是立馬看到，前后端兩個瀏覽器窗口，都同時更新顯示了？！

同步更新后調試完畢后，編譯成生產環境：

vue2+Flask網站，輕松部署到免費主機Heroku

npm run build

復制/dist/目錄下文件，到/app/templates, /app/static下

OK！下一步，我們就來開發公眾號RSS應用的后端程序，敬請期待！

作者：非夢nj

鏈接：https://www.jianshu.com/p/3f6964028ec3

總結

以上是生活随笔為你收集整理的python后端框架flask_Vue+Flask轻量级前端、后端框架，如何完美同步开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。