我在vue的构建设置和Flask的静态文件夹设置上遇到了问题。我已经尝试了几种情况来设置Flask的静态文件夹,但只有其中一种情况适用于我。我不知道为什么。
// Build setting from vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/dist/'
: '/'
}
所以我的index.html文件中的资源文件src和href为:
<script src=/dist/js/app.f4f6d455.js></script>
这是我的尝试和结果。
案例1:错误!
// Flask Setting
app = Flask(__name__, template_folder = "./dist")
//Directory Structure
/project
/dist
/js
app.f4f6d455.js
index.html
flask.py
结果:无法加载资源 > http://127.0.0.1:5000/dist/js/app.f4f6d455.js
案例2:错误!
将资源复制到“static / dist”中,因为Flask的默认static_folder是“static”,并保留dist文件夹以更好地澄清错误消息。
// Flask Setting
app = Flask(__name__,
template_folder = "./dist")
//Directory Structure
/project
/dist
/js
app.f4f6d455.js
index.html
/static
/dist
/js
app.f4f6d455.js
flask.py
结果:无法加载资源 > http://127.0.0.1:5000/dist/js/app.f4f6d455.js
情况3:有效!
将flask的static_folder更改为“dist”
// Flask Setting
app = Flask(__name__,
static_folder = "dist",
template_folder = "./dist")
//Directory Structure
/project
/dist
/js
app.f4f6d455.js
index.html
flask.py
我认为当Flask试图查找其资产文件时,这是根路径的问题。但是Case 3在Case 2不起作用时有效。如果Case 2的根路径是'http://127.0.0.1:5000/static',那么它应该能够工作。有人能帮我理解这个问题吗?
提前感谢。
publicPath
和outputDir
搞混了。加载应用程序的默认页面应该使用哪个URL路径?是http://localhost:5000/
还是http://localhost:5000/dist/
? - undefined