Vue+Flask看这篇就够了

最新推荐文章于 2025-07-05 05:44:58 发布

weixin_30602505

最新推荐文章于 2025-07-05 05:44:58 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/huiwenhua/p/10729570.html

本文详细介绍了如何使用Vue和Flask搭建一个前后端分离的项目，包括项目目录结构设计、搭建步骤及配置说明，最后通过运行项目验证了方案的有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.项目目录结构

    使用Vue+Flask搭建前后端分离的基础平台。

    my_project/

        app/

                //vue目录

        static/

        models/

        remplates/

            404.html

            index.html

        views/

                __init__.py

                index.py

        run.py

        settings.py

        README.md

my_project为项目根目录，my_project/app为Vue项目文件所在位置，其他文件和文件夹为flask项目的基本目录或者文件，在具体使用中再具体分析。

二.项目搭建过程

    1.创建项目文件夹my_project：

            mkdir my_project

    2.进入目录并创建Vue项目(此处假设你已经熟悉Vue CLI的使用)：

            cd my_project

            vue init webpack app

    3.进入app文件夹，修改webpack编译config，目的是修改Vue编译后的文件存储位置：

            cd  app

            - 修改config/index.js下的build对象的如下值：

                        // 编译生成的页面入口

                        index: path.resolve(__dirname, '../../templates/index.html'),

                        // Paths

                        assetsRoot: path.resolve(__dirname, '../../templates'),

                        assetsSubDirectory: '../static',

                        assetsPublicPath: '/',

    4.在app目录下运行

                npm install

                npm run build

    5.在更目录下创建最下应用run.py，代码如下:

                from flask import Flask, render_template

                app=Flask(__name__)

                @app.route('/')

                def hello_world():

                    return render_template("index.html")

                if__name__=='__main__':

                app.run(host="0.0.0.0", port="3000")

    6.启动项目：

            python run.py

    7.在浏览器中键入0.0.0.0:3000即可看到运行效果

    至此，基于Vue+Flask的项目搭建完成，前后端分离需要Nginx配合，具体使用之后补充，有任何疑问欢迎讨论，不喜勿喷！

转载于:https://www.cnblogs.com/huiwenhua/p/10729570.html