vue-cli（二）：使用vue-cli和flask构建一个前后端分离的应用

本文介绍使用vue-cli和flask构建前后端分离的应用。

一、前端

这部分在上一节中已经介绍，如果已经能够在浏览器中看到页面代表成功，然后构建应用，注意静态资源的输出路径。

在 test/config/index.js 找到下面的两行

index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),

然后成改如下内容

index: path.resolve(__dirname, '../../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../../dist'),

所以， 包含 html/css/js 静态资源包的 /dist 文件夹和 /test 在同一级目录下。

然后运行

$ npm run build 

可以在test同级目录下看到文件夹dist。

二、后端

flask的安装在前文已经介绍，这里直接激活环境，进入到virtualenv安装目录下的venv/bin，执行

. activate

在应用的根目录下新建文件hello.py

from flask import Flask, render_template

app = Flask(__name__,
            static_folder = "./dist/static",
            template_folder = "./dist")

@app.route('/')
def index():
    return render_template("index.html")

if __name__ == '__main__':
    app.run(debug = True)

注意这里的路径对应关系，因为上一节中已经把静态资源的路径放在了应用根目录下，所以这里的路径直接就是./dist，总之要对应。

然后执行

python hello.py

打开http://127.0.0.1:5000/ 就可以看到你的前端页面了。

三、配置后端路由

这时候访问about页面时候还是会出错，需要修改后端hello.py中的路由为：

@app.route('/', defaults={'path': ''})
@app.route('/')
def catch_all(path):
    return render_template("index.html")

把所有页面都重定向到index.html，然后vue会自动解析。