vue+django+nginx部署

最新推荐文章于 2025-07-14 15:24:18 发布

Qc1998

最新推荐文章于 2025-07-14 15:24:18 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： django vue 文章标签： django vue

本文链接：https://blog.youkuaiyun.com/Qc1998/article/details/79943561

django 同时被 2 个专栏收录

5 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

本文详细介绍了如何将Vue.js前端应用与Django后端框架进行集成，并通过Nginx进行部署。首先，我们将探讨Vue.js与Django的交互方式，然后讲解如何配置Django以支持前端静态文件。最后，我们将讨论Nginx的配置，以实现高效且稳定的线上部署。通过这个教程，读者将掌握完整的前后端分离项目部署流程。

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

当通过vue-cli完成了一个vue项目时，通过npm run build 指令将项目打包，这时候就会将文件集中到dist文件夹中,
我们需要将这个文件夹放在django的目录下。

首先配置urls.py文件，加入

from django.views.generic import TemplateView
urlpatterns = [
    ……
    path('',TemplateView.as_view(template_name="index.html"),name="index"),
    …… 
]

修改settings.py，我们需要配置模板文件位置和静态文件位置

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        '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"), ]

这时候运行django，访问127.0.0.1:8000就可以看到你的vue项目的前端了。

之后配置nginx和uwsgi文件，步骤和部署django+nginx没有太大的差别，只要修改nginx配置文件中的静态文件夹就行了，将它指向dist中static