上一节在Flask目录下，新建了前端Vue项目。这节是Vue与Flask的关联。
Vue中的设置
先需要修改资源目录，这样项目打包后会将静态资源都放在static文件夹下，方便Flask后端的引用。这里的static文件夹可以是任何名称，如图：
修改资源目录
打包编译Vue项目
编译完成后，我们会在vue文件夹下得到dist文件夹（上上图中输出目录的设置），里面放置的就是编译好的前端文件。
Flask中的设置
此时需要打开app.py文件（第一节中创建的小应用），修改如下：
from flask import Flask
from flask import render_template #引入模板插件
app = Flask(__name__,
static_folder='./vue/dist/static', #设置静态文件夹目录
template_folder = "./vue/dist") #设置vue编译输出目录dist文件夹，为Flask模板文件目录
@app.route('/')
def index():
return render_template('index.html',name='index') #使用模板插件，引入index.html。此处会自动Flask模板文件目录寻找index.html文件。
if __name__ == '__main__':
app.run()
然后在运行Flask：
$ python app.py
* Running on http://127.0.0.1:5000/
现在访问 http://127.0.0.1:5000/ ，你会看见Vue的前端页面。
总结，就是将Vue和Flask的静态文件夹、模板文件夹匹配对应上，就能正常运行。
如果后期还有其他操作需要添加，我再更新文档。
