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__