flask中如何引入vue-cli3.X web项目的静态资源路径

2024-01-08 04:23:01

Flask是一个轻量级Python网络框架，而Vue.js是一个流行的前端JavaScript框架。当您想在Flask项目中集成Vue.js应用时，您需要知道如何正确引入Vue.js应用的静态资源路径，以便浏览器能够正确加载和渲染Vue.js应用。

问题

在vue-cli3.X及以上版本中，通过yarn run build生成的dist文件夹中包含js文件夹和css文件夹，而这些文件夹包含了Vue.js应用的编译后的代码和样式表。在Flask的web项目中，您需要在run.py文件中使用Flask()函数来创建一个Flask应用程序对象，并在其中配置静态资源文件的路径。

from flask import Flask, render_template

app = Flask(__name__, static_url_path='/static', static_folder='static')

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

if __name__ == '__main__':
    app.run()

在上面的代码中，我们使用了static_url_path和static_folder这两个参数来配置静态资源文件的路径。static_url_path指定了静态资源文件的URL路径前缀，而static_folder指定了静态资源文件的实际路径。

解决方案

为了解决vue-cli3.X web项目的静态资源路径无法在Flask web项目中正确引用的问题，您需要在Flask的web项目中添加以下代码：

app.add_url_rule('/static/<path:filename>', 'static', view_func=send_from_directory, methods=['GET'])

这行代码将告诉Flask web项目，当浏览器请求以/static/开头的URL时，Flask应该从static文件夹中查找对应的文件并将其发送给浏览器。

完整代码

下面的代码是完整的Flask web项目代码，其中包含了如何引入vue-cli3.X web项目的静态资源路径：

from flask import Flask, render_template, send_from_directory

app = Flask(__name__, static_url_path='/static', static_folder='static')

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

@app.route('/static/<path:filename>')
def static(filename):
    return send_from_directory(app.static_folder, filename)

if __name__ == '__main__':
    app.run()