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

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

Bonus:

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

問題

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

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

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

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

__webpack_hmr?(webpack熱替換文件)

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

實施新建兩個目錄，存放Flask的模板和靜態(tài)文件：/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的靜態(tài)文件夾/static下面：/static/font-awesome/1.1.js、2.2.js...，這些文件是vue-router里，如果定義了路由懶加載，那除了app.js以外，webpack編譯時，會多出這些類似的文件，大家用 npm run build可以看到產(chǎn)生了哪些懶加載js，然后把它們加入到 /templates/index.html里面去：

同步更新

現(xiàn)在，同時運行前端、后端開發(fā)環(huán)境：npm?run?devpython?app.py

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

Vue、Flask同步更新前

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

簡?讀(Changed?in?Vue

。。。??????

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

同步更新后調(diào)試完畢后，編譯成生產(chǎn)環(huán)境：

vue2+Flask網(wǎng)站，輕松部署到免費主機Heroku

npm run build

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

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

作者：非夢nj

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。