django-vue前后端分离项目

    django-admin startproject mysite #创建django项目
    
    cd mysite # 进入django项目
    
    vue init webpack appfront #创建vue项目
    #这样创建的好处是vue的根目录在django的BASE_DIR下(后面会用到)

    # 在django项目根目录下
    pip install django-cors-headers

    INSTALLED_APPS = [
    ...
    # demo
    'corsheaders',
    ...
    ]
    
    MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 需注意与其他中间件顺序，这里放在最前面即可
    ...
    ]
    
    # 支持跨域配置开始
    CORS_ORIGIN_ALLOW_ALL = True
    CORS_ALLOW_CREDENTIALS = True

    npm run build #打包完在根目录下多了个dist文件

    #...
    # 下面的路径就表明了为什么刚刚前端要创建在后端项目的根目录下
    TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'appfront/dist')], # demo add
        ...
    },
    ]
    #...
    # 静态资源，不设置访问不到
    STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'appfront/dist/static'),
    ]
    #..

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

    python manage.py runserver