上一节在Flask目录下，新建了前端Vue项目。这节是Vue与Flask的关联。

Vue中的设置

先需要修改资源目录，这样项目打包后会将静态资源都放在static文件夹下，方便Flask后端的引用。这里的static文件夹可以是任何名称，如图： 修改资源目录 此时我们就可以开始打包编译Vue的项目了，如图： 打包编译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的静态文件夹、模板文件夹匹配对应上，就能正常运行。
如果后期还有其他操作需要添加，我再更新文档。