Vue-cli3和Django本地结合教程

此教程是为了记录自己在结合项目的过程中遇到问题的解决方法

创建VueCli3项目

---

我用的是ant design vue框架所以安装就是按照它文档写的来的

// 安装cli3
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

注意：如果安装了cli2需要卸载之后再安装cli3

$ vue create frontend // 创建一个叫demo的项目

创建Django项目

---

Django安装方法

// 创建project
django-admin startproject everything
cd demo
python manage.py startapp backend

划重点-正文开始了

---

1.配置首页url

# django项目目录下的urls.py，让首页显示打包的index.html文件
from django.views.generic import TemplateView
path('', TemplateView.as_view(template_name="index.html")) 

2.设置setting配置项

# 基本路径
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# 前端路径
FRONTEND_ROOT = 'frontend/dist'
# 静态资源地址
STATIC_URL = '/static/'
# 模块资源引用地址
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, FRONTEND_ROOT),
    os.path.join(BASE_DIR, FRONTEND_ROOT + '/static/'),
)

# 项目ulrs地址，每个人的项目地址前缀是不一样的
ROOT_URLCONF = 'everything.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['frontend/dist'], # 路径指向前端打包文件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',
            ],
        },
    },
]

3. vue设置build配置项 vue.config.js

/* django会认static文件夹，所以没有的话需要在vue.config.js里面配置。
因为vuecli3没有vue.config.js文件，所有需要手动创建
*/
module.exports = {
    // 输出目录
    assetsDir: 'static',
};

4. 解决两个环境之间的跨域问题
   安装django-cors-headers

pip install django-cors-headers

# 列表有序加载，顺序不能错
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    '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',
]
# 增加跨域忽略
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

# 允许跨域的域名
CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8081',  # Frontend
    '127.0.0.1:8080',  # Backend
    '127.0.0.1:8000',  # Frontend on dev mode
)
# 设置允许访问的方法
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
# 设置允许的header
CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
    'token'
)

总结

---

本地结合步骤大概就是这样，但是结合完之后如果要是用pycharm启动项目时可能会发现django指向的是你的dist打包文件的index.html，这样的话对于调试前端项目来说非常不友好，所以目前我的解决办法就是，在本地的前端项目中启动服务，再在django项目中启动服务，两者之间也是可以满足联调关系的，在前端项目完成后，再build包然后更新dist文件夹。
有问题请评论，看到会及时解答疑问。