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

最新推荐文章于 2024-07-17 20:45:00 发布

问就是啥也不是

最新推荐文章于 2024-07-17 20:45:00 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/bcfdsagbfcisbg/article/details/80511404

版权

本文详细阐述如何结合vue-cli和flask创建一个前后端分离的应用。首先，确认前端部分已成功构建并正确配置静态资源输出路径。接着，激活flask环境，设置后端路由，确保静态文件夹dist与应用根目录在同一级。最后，调整后端hello.py的路由配置，以实现页面重定向，使vue能正确解析。

摘要由CSDN通过智能技术生成

本文介绍使用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 = "

关注