Flask+vue打包静态资源后显示空白及static文件路径报错

2023-08-11 10:31| 来源: 网络整理| 查看: 265

使用flask+vue做前后端分离：

先做vue前端工程，参考菜鸟教程安装好vue并运行helloworld的页面；

然后打包前端代码：

npm run build

会得到的前端文件如下

到此前端就准备好了。

接下来是准备flask,参考官网文档安装好flask,并启动一个最小应用,

from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!'

运行后在浏览器中打开 http://127.0.0.1:5000/ ，应该可以看到 Hello World! 字样。

这时flask也准备好了。

那怎么把flask 和vue结合呢

使用 render_template 方法让flask返回 index.html页面；

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

但这时在浏览器中打开 http://127.0.0.1:5000/ 会报404找不到页面，就是找不到html页面；

因为flask必需要指定html文件所在的目录，假如flask与vue的目录如下：

hello.py web\ dist\ css\ xxx.css img\ xxx.jpg js\ xxx.js index.html

那么要用template_folder来指定html文件的路径：

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

这时在浏览器中打开 http://127.0.0.1:5000/ 可以打开了，但是页面是空白，提示找不到css,js文件：

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) 127.0.0.1 - - [09/Jan/2021 11:05:50] "GET / HTTP/1.1" 200 - 127.0.0.1 - - [09/Jan/2021 11:05:50] "GET /css/app.5154eb61.css HTTP/1.1" 404 - 127.0.0.1 - - [09/Jan/2021 11:05:50] "GET /js/chunk-vendors.95447de0.js HTTP/1.1" 404 - 127.0.0.1 - - [09/Jan/2021 11:05:50] "GET /js/app.f6a69152.js HTTP/1.1" 404 - 127.0.0.1 - - [09/Jan/2021 11:05:50] "GET /js/about.ad69abb4.js HTTP/1.1" 404 -

这时还需要为css,js文件指定目录，要用到static_folder+static_url_path来指定静态文件的目录：

from flask import Flask from flask import render_template app = Flask(__name__, template_folder="./web/dist", static_folder="./web/dist", static_url_path="") @app.route('/') def index(): return render_template("index.html")

这时在浏览器中打开 http://127.0.0.1:5000/ 就可以打开页面了。

【本文地址】

公司简介

联系我们