导言
我们的Vue2.0应用：简读-微信公众号RSS，即将进入后端开发。
Vue+Flask作为轻量级前端、后端框架，非常适合组合起来快速开发。一个是js，一个是Python。
Bonus:
可以完美实现跨域调试，不需要JSONP，也不需要服务器端设置<code>'Access-Control-Allow-Origin'</code> -> Vue 2.0 起步(4) 轻量级后端Flask用户认证 - 微信公众号RSS
问题
作为一个全(ku)能(bi)的全栈开发人员，前、后端往往是一个人搞定。开发过程中最常见问题是，每次前端修改了html/js，一般先要用webpack编译，再手工复制编译后文件到Flask的工作目录，后端框架才能使用更新后html/js。
那么，对于追求极致效率的人，如何完美实现：前后端共用代码同步更新呢？
解决
注意：以下是以初始化模板为
“vue init webpack <ProjectName>”为例
观察Vue开发时，webpack热替换的编译代码中，含有以下文件：
app.js (包含打包后的所有HTML、js、CSS文件） __webpack_hmr (webpack热替换文件)
那我们把这些文件让 Flask引用一下Vue http://localhost:8080 的这两个文件，不就可以实现同步更新了吗？
如果初始化模板
“vue init webpack-simple <ProjectName>”，则替换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 <ProjectName>”，则替换app.js为dist/build.js
# /templates/index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>简读 - 公众号RSS</title> <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css"> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://localhost:8080/app.js"></script> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://localhost:8080/1.1.js"></script> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://localhost:8080/2.2.js"></script> </body></html>
大家要问了，/templates/index.html里，不仅有 app.js，还有其它的几行？
是的，等我一一道来：
<link>是引用font-awesome图标，如果你没有用到图标CSS，也可以忽略这一行
<link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
同时，复制<code>/node_modules/font-awesome/</code>整个文件夹，到Flask的静态文件夹/static下面：
/static/font-awesome/
1.1.js、2.2.js...，这些文件是vue-router里，如果定义了路由懒加载，那除了app.js以外，webpack编译时，会多出这些类似的文件，大家用 <code>npm run build</code>可以看到产生了哪些懒加载js，然后把它们加入到 /templates/index.html里面去：
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://localhost:8080/1.1.js"></script><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://localhost:8080/2.2.js"></script>
同步更新
现在，同时运行前端、后端开发环境：
npm run devpython app.py
打开两个浏览器：
Vue.js: http://locahost:8080Flask: http://localhost:5000
Vue、Flask同步更新前
这时，我们更新一下，比如前端框架里，Home.vue代码中标题的名字：
# /src/components/Home.vue<template> <div> <div class="jumbotron"> <h1 class="display-3 text-success">简 读（Changed in Vue</h1>。。。 </p> </div> </div></template>
是不是立马看到，前后端两个浏览器窗口，都同时更新显示了？！
同步更新后
调试完毕后，编译成生产环境：
vue2+Flask网站，轻松部署到免费主机Heroku
npm run build
复制/dist/目录下文件，到/app/templates, /app/static下
OK！下一步，我们就来开发公众号RSS应用的后端程序，敬请期待！
Vue 2.0 起步(1) 脚手架工具 vue-cli + Webstorm 2016 + webpack
Vue 2.0 起步(2) 组件及 vue-router实例 - 微信公众号RSS
Vue 2.0 起步(3) 数据流vuex和LocalStorage实例 - 微信公众号RSS
Vue 2.0 起步(4)第二版 轻量级后端Flask用户认证 - 微信公众号RSS
...
Vue 2.0 起步(7) 大结局：公众号文章抓取 - 微信公众号RSS
http://www.jianshu.com/p/ab778fde3b99
作者：非梦nj
链接：https://www.jianshu.com/p/3f6964028ec3
共同学习，写下你的评论
评论加载中...
作者其他优质文章
