Django2与@Vue/Cli3整合--访问静态文件404问题

最新推荐文章于 2023-02-16 10:23:35 发布

原创最新推荐文章于 2023-02-16 10:23:35 发布 · 3.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#django #vue

Vue.js 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何将Django2与Vue/Cli3进行整合，包括项目创建、配置、静态文件处理及常见问题解决。通过具体步骤演示，帮助读者掌握前后端分离项目搭建技巧。

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

我们首先简要来看下Django2与@Vue/Cli3如何整合

创建Django2项目
通过django-admin startproject mysite命令创建
创建后端服务app
cd mysite目录后,django-admin startapp backend
创建vue项目
vue create frontend

通过三个步骤后，我们可以看到在mysite目录下存在frontend,backend,manage.py,db.sqlite3平级目录。

下面就是django的配置，打开settings.py(在backend目录下)

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['frontend/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',
            ],
        },
    },
]

STATIC_URL = '/static/'
添加这行
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist"),
]

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html')),  # 添加这行
]

下面就npm run build，在frontend下会生成dist目录，起django项目，python manage.py runserver，访问http://127.0.0.1:8000，惊奇的发现，首页index.html是可以访问,但是绑定的静态文件全都404

发现问题

为啥会404，我们先看下index.html的文件

截取其中一段
<link href=/css/login.d7cd78d9.css rel=prefetch>

按这个相对路径看，index.html与css是同级目录，那href不是应该是./css/login.d7cd78d9.css(多个点)，修改，重新运行，发现还是404.

我们再看看django访问静态文件的配置，是访问dist目录下似乎没毛病，但是我们忘记了还有STATIC_URL是访问带static文件夹的，官方文档

解决问题

在frontend目录下创建vue.config.js

module.exports = {
    assetsDir: 'static',  #指定`build`时,在静态文件上一层添加static目录
};

接下来就是重新build（index.html的引用地址也同步改了），起django，访问，解决问题