使用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/ 就可以打开页面了。
Original: https://blog.csdn.net/zucheng10/article/details/112388652
Author: zucheng10
Title: Flask+vue打包静态资源后显示空白及static文件路径报错
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/749323/
转载文章受原作者版权保护。转载请注明原作者出处！