1. Project Structure Overview
Before we start, let's take a look at the directory structure of the project. Suppose your project structure is as follows:
project/
│
├── server/
│ ├── core/
│ ├── services/
│ ├── static/
│ │ ├── css/
│ │ ├── fonts/
│ │ ├── img/
│ │ ├── js/
│ │ ├── upload/
│ │ └── views/
│ ├── admin/
│ ├──
│ ├──
│ ├──
│ ├──
│ ├──
│ ├──
│ ├──
│ ├──
│ ├──
│ ├──
│ ├──
│ └──
│
└── frontend/
├── dist/
├── public/
├── src/
├──
└──
In this structure, the server directory contains the Flask backend project, and the frontend directory contains the Vue frontend project. Our goal is to place the dist folder built by the Vue project in Flask's static directory and access the Vue front-end through Flask.
2. Construction and deployment of Vue projects
First, we need to make sure that the Vue project has been built. Vue projects are usually usednpm run buildThe command is built, and after the build, adistFolder, which contains all static resources of the front-end project.
2.1 Build a Vue project
existfrontendRun the following command in the directory:
npm run build
After the construction is completed,distThe folder will containand other static resource files (such as JS, CSS files).
2.2 Put the build results into the Flask project
WilldistCopy all contents in the folder to the Flask projectstaticIn the directory. final,staticThe structure of the directory should be as follows:
static/ ├── css/ ├── fonts/ ├── img/ ├── js/ ├── upload/ ├── views/ └──
3. Flask project configuration
Next, we need to configure the Flask project so that it correctly recognizes and returns to the Vue front-end project.
3.1 Ensure Flask recognizes static files
Flask will search for the static folder as the storage location of the static file in the project root directory by default. If your static folder is elsewhere, you need to explicitly specify the static file path.
In, make sure that the Flask application is configured with the correct static file path:
from flask import Flask app = Flask(__name__, static_folder='static')
3.2 Running the Flask project
You can run the Flask project using the following command:
python
By default, Flask will run onhttp://localhost:5000/。
4. Processing of static files
In Flask, static files (such as CSS, JS, pictures, etc.) are usually placed instaticIn the directory. Flask automatically handles requests for these static files.
4.1 Return static file
To ensure that Flask can return Vue'sFile, you need to configure a route in Flask to handle the root path request:
@('/')
def serve_vue_app():
return app.send_static_file('')
4.2 Handling static resources
After the Vue project is built,Other static resources (such as JS, CSS files) will be referenced. Flask automatically handles requests for these static resources, provided they are located instaticIn the directory.
5. Routing configuration
If your Vue project uses front-end routing (such as Vue Router), you need to configure a wildcard route in Flask to ensure that all front-end routes can return correctly.document.
5.1 Configuring Wildcard Routing
existAdd the following routes:
@('/<path:path>')
def serve_vue_app(path):
return app.send_static_file('')
This route captures all paths and returnsfiles, allowing Vue Router to handle front-end routing.
6. FAQs and Solutions
6.1 Static file path error
If the static file cannot be loaded, it may be because the path is configured incorrectly. make sureThe static resource path in is correct, and Flask'sstatic_folderCorrect configuration.
6.2 Front-end routing does not work properly
If front-end routing doesn't work properly, it may be because Flask does not configure wildcard routing correctly. Make sure you have added wildcard routes to handle all paths.
6.3 Flask cannot find static files
If Flask cannot find the static file, checkstaticWhether the directory correctly places the Vue project's build results and ensuresstatic_folderCorrect configuration.
7. Summary
Through the above steps, you should be able to successfully integrate and access Vue front-end projects in a Flask project. The key is to correctly configure Flask's static file paths and routes to ensure that the build results of the Vue project can be correctly recognized and returned by Flask.
This architectural model of front-end separation not only improves development efficiency, but also allows front-end developers to focus on their respective fields. I hope this article can help you successfully integrate Flask and Vue and provide reference for your project development.
Reference code
Here is the complete sample code:
from flask import Flask
app = Flask(__name__, static_folder='static')
@('/')
def serve_vue_app():
return app.send_static_file('')
@('/<path:path>')
def serve_vue_app_path(path):
return app.send_static_file('')
if __name__ == '__main__':
(debug=True)
With this configuration, your Flask project will be able to access and run the Vue front-end project correctly. Hope this blog helps you!
This is the article about the process steps of integrating and accessing Vue front-end projects in Flask projects. For more related Flask integration and accessing Vue project content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!