Django是一个基于python开发，且强大好用的web框架。虽然Django模型的设计优美、令人赞叹不已，但其模板部分却一直饱受争议。
本文介绍如何构建Vue.js与Django并存，实现前后端分离的方法。示例项目名为vue_django。
利用django构建基本框架
>>> django-admin startproject vue_django
结构如下
>>> tree
.
├── manage.py
└── vue_django
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
进入项目根目录，创建一个名为backend的django app作为项目后端
>>> cd vue_django
>>> python manage.py startapp backend
# 初始化数据库
>>> python manage.py migrate
结构如下：
.
├── backend
│ ├── __init__.py
│ ├── admin.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── manage.py
└── vue_django
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
使用Vue.js创建一个Vue项目作为前端
vue-init webpack frontend
此时，项目根目录有三个文件夹，分别为backend、frontend和vue_django。接下来我们使用webpack打包Vue.js项目。
cd frontend
npm install
npm run build
# 若遇到‘typescript‘包丢失，则npm install typescript后再build
构建完成后，frontend目录下会多出一个名为dist的新目录，里面有一个index.html和一个目录static，static存放前端所需静态文件。
使用Django的通用视图TemplateView
找到项目根路由配置vue_django/urls.py，使用通用视图创建最简单的模板控制器，访问/时直接返回index.html
...
from django.views.generic import TemplateView
...
urlpatterns = [
... ,
path(‘‘, TemplateView.as_view(template_name="index.html")),
]
配置Django项目的模板搜索路径
上一步使用了Django的模板系统，所以需要配置模板，使Django直到从哪里找到index.html。
打开vue_django/settings.py，找到TEMPLATES配置项，修改如下：
TEMPLATES = [
{
‘BACKEND‘: ‘django.template.backends.django.DjangoTemplates‘,
# 修改DIRS
‘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‘,
],
},
},
]
注意这里的frontend是Vue.js项目目录，dist则是运行npm run build构建出的index.html与静态文件夹static的父级目录。这时我们启动Django项目，访问/则可以访问index.html，但静态文件都是404错误。下面解决这个问题。
配置静态文件搜索路径
打开vue_django/settings.py，在文件最后添加STATICFILES_DIRS配置项：
# Add for vuejs
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "frontend/dist/static"),
]
此时再次启动Django，访问/则可以看到Vue.js自带的Hello World页面了。
这里遇到了新问题：使用Vue.js的开发环境脱离了Django环境，如果要访问Django环境的API，就会出现跨域问题。有两种解决方案：一种是在Vue.js层上做转发(proxyTable)；另一种是在Django层注入header，这里使用后者，用python第三方包django-cors-headers来解决跨域问题。
pip install django-cors-headers
修改vue_django/settings.py里MIDDLEWARE配置，添加corsheaders中间件。
MIDDLEWARE = [
‘django.middleware.security.SecurityMiddleware‘,
‘django.contrib.sessions.middleware.SessionMiddleware‘,
# 添加corsheaders中间件
‘corsheaders.middleware.CorsMiddleware‘,
‘django.middleware.common.CommonMiddleware‘,
‘django.middleware.csrf.CsrfViewMiddleware‘,
‘django.contrib.auth.middleware.AuthenticationMiddleware‘,
‘django.contrib.messages.middleware.MessageMiddleware‘,
‘django.middleware.clickjacking.XFrameOptionsMiddleware‘,
]
这里要注意中间件添加顺序，列表是有序的。接下来修改vue_django/settings.py，在文件末尾添加STATIC_ROOT = os.path.join(BASE_DIR, "static")。
至此，生产环境搭建完成。我们可以到服务器上部署该web app了。无论什么web框架，都需要一个web服务器把app跑起来。常见的解决方案有apache、nginx。这里介绍nginx+uwsgi的解决方案。