Vue3+Django4项目整合_django4+vue3打包-CSDN博客

本文链接：https://blog.csdn.net/a820206256/article/details/127835009

本文指导如何将使用Vue CLI构建的前端项目与Django后端结合，通过配置dist文件夹和模板视图，实现静态资产管理和项目运行。

前端使用vue，后端使用Django，怎么把Vue项目丢到Django运行呢？直接上代码！

前端使用vue-cli版本

后端django版本

前端vue项目写完后，在vue.config.js里加入

  assetsDir: 'static',// 静态资源打包输出目录

运行npm run build

运行完成后会生成dist文件夹,就是我们打包好的项目

把dist文件夹放到桌面

接下来我们去后端Django配置

把dist文件夹丢到Django项目根目录,与APP同级

然后打开settings.py配置

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [BASE_DIR / 'templates',]
        'DIRS': ['./dist', ]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

然后继续配置

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "./dist/static")
]

然后再项目根路由导入

from django.views.generic import TemplateView

    path('', TemplateView.as_view(template_name='index.html')),

此时，在终端运行python manage.py runserver 就能看到我们的项目了

自此教程就结束了！