vue+django的项目部署问题

由于此前只接触过vue+springboot的开发经历，没有经历过django的开发，所以特地记录一下如何将前端做的vue项目打包放到django中使用

一、两种方式结合(任选一种)

第一种：将打包好的static和index分开放的方式

0. 环境搭建

安装django，项目路径下shift+鼠标右键打开open powershell here,然后输入

pip install django

然后输入(按照requirements.txt搭建环境)
（requirements.txt文件记录了当前程序的所有依赖包及其精确版本号
其作用是用来在另一台PC上重新构建项目所需要的运行环境依赖。后端通过pip freeze > requirements.txt生成
）

Python -m pip install  -r requirements.txt

有部分下载不了就单独安装(自行百度)

1.前端vue的打包

在前端编译工具的命令行中输入npm run build，开始编译，在项目的目录下会生成一个dist文件夹，里面有我们需要的static文件夹和index.html文件

注：如果使用的vue-cli3之后的版本会出现index.html在static文件夹里面，那怎么把index.html和static放在同一级目录下呢？
修改vue.config.js(VueCli3.0新建的项目里没有，要在项目目录新建一份)

module.exports = {
  assetsDir: 'static',// 静态资源打包输出目录 (js, css, img, fonts)，相应的url路径也会改变
};

2.后端django中的文件设置

首先把前端生成的dist文件夹中的static文件夹放在项目的目录下；然后自己在该目录下新建一个templates文件夹，把index.html放在里面。

3.后端django中代码配置

A.在settings.py中

import os
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),# 项目默认会有的路径，如果你部署的不仅是前端打包的静态文件，项目目录static文件下还有其他文件，最好不要删
    os.path.join(BASE_DIR, "/static"),# 加上这条
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'),]
        ,
        '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',
            ],
        },
    },
]

B.在urls.py中

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

第二种：将static和index放在一个frontend文件夹下

1.前端项目打包

同样npm run dev下生成dist文件夹

2.后端django中

在项目根目录下新建一个frontend文件夹，然后把dist里面的内容全部复制过去即可

3.后端django代码设置

找到mysite文件夹或项目命名的文件夹中找到setting.py文件
首先是template配置：

import os
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'frontend')],
        '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/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend"),
]

最后是在本目录下找到urls.py文件

from django.views.generic import TemplateView
path('', TemplateView.as_view(template_name='index.html'), name='index'),

另-或者：创建一个app或在已有的app的基础上，并且在views中写一个index路由函数，并且在url中配置首页

#加载静态界面index首页
def index(request):
    request.META["CSRF_COOKIE_USED"] = True
    return render(request,'index.html')

request.META[“CSRF_COOKIE_USED”] = True这句可以对vue单页应用进行csrf_token设置，方便进行csrf防御

urlpatterns = [
    url(r'^baseapi/', include("baseapp.urls")),
    url(r'^.*?$',views.index,name="index"),
]

二、如何把github或gitee拉下来的django代码再去生成数据库

先新建一个数据库

名称是settings.py里面配置过的

具体的操作命令参见我的另一篇博文.

两个命令

建好数据库后，在项目目录下按住shift键+鼠标右键打开open PowerShell Here。进入命令行后，依次输入两个命令

python manage.py makemigrations

python manage.py migrate

然后就把数据库迁移好了，这一步有任何问题欢迎在评论区交流

三、项目跑起来！

弄好数据库以后，我们就可以把项目跑起来了

// 这里的接口在8000-8999都可以
python manage.py runserver 127.0.0.1:8080

四、配置跨域

命令行中输入

pip install  django-cors-headers

也是在setting.py中

INSTALLED_APPS = [
    ...
    'corsheaders'，
    ...
 ]
# 列表有序加载，顺序不能错
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'
)

五、注意！！！

在前端项目包之前要配置好请求的根地址，就是上面后端工程运行起来的地址
在main.js中改动

或者在封装好了的request.js中配置

这样才能正常访问