Django3.0和Vue前后端分离以及访问静态文件

1. 前言

主要记录Django3.0和Vue进行前后端分离遇到的问题。工具链：Python 3.8.6、Django 3.1.7、Vue 2.6.12、Vue Cli 4.5.12。

2. 项目目录架构

新建一个总的项目目录，下面分2个文件夹，一个为Django的后端项目，一个为前端的Vue项目。

mkdir BookDV
cd BookDV

3. 创建Django项目

在BookDV文件夹下创建Django项目

django-admin startproject Books_demo
django-admin startapp books

4. 创建Vue项目

# vue cli 3 之后，使用create命令创建项目
vue create appfront

5. 将Vue项目打包

现在Vue项目根目录下配置vue.config.js

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

将public文件夹下的favicon.ico移动到public/static/img/文件夹下，如无文件夹，请创建记录

更改public文件夹下的index.html的favicon文件路径：<%= BASE_URL %>static/img/favicon.ico

使用命令打包

npm run build

6. 更改Django内配置

更改settings.py 配置

# 更改模板的路径
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR.parent, 'appfront/dist')],
        ···
    },
]

···


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

更改 urls.py 配置

from django.contrib import admin
from django.urls import path, include
from django.views.generic.base import TemplateViewa

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('books.urls')),
    path('', TemplateView.as_view(template_name='index.html'))
]

7. 配置完成后，启动django服务即可

python3 manage.py runserver

可打开浏览器，输入网址 127.0.0.1:8000即可查看。