Vue+Django简单部署本地Windows

1. 前端配置跨域、api请求的ip地址和打包的静态资源位置

2. 后端配置跨域、templates和static路径和路由

3. 将vue打包放入django中，在本机ip地址上运行django即可

该方法仅在本地windows所在的内网中可以访问

不使用uwsgi和nginx

vue axios跨域携带cookie

在axios的请求实例创建时配置

const axiosInstance = Axios.create({
    withCredentials: true
})

vue axios请求ip配置

vue axios发送后端api请求的ip地址要换成本机的实际ip地址

即将127.0.0.1:xxxx换成ipv4:xxxx

vue配置打包的静态资源位置

vue.config.js增加assetsDir，使vue打包的静态文件都放在static文件夹中（不增加也行，只要将vue打包出来的所有文件夹（静态资源）都放入django项目的static文件夹中即可）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  assetsDir: "static",  // 添加
  transpileDependencies: true,
  lintOnSave: false
})

vue打包放入django

打包前先运行一下看有没有报错

npm run build

将打包后的dist文件夹里的

static里的所有文件放到django项目里的static文件夹下（static和manage.py同级）

index.html文件放到django项目里的templates文件夹下（templates和manage.py同级）

django跨域配置

先安装corsheaders

pip install django-cors-headers

settings.py增加corsheaders

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',  # 增加
    'app'
]

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

django templates和static路径配置

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

django路由配置

使django能够找到vue的index.html，显示出页面

views.py添加Index类

from django.views import View
from django.shortcuts import render

class Index(View):
    def get(self, req):
        return render(req, 'index.html')

urls.py（与views.py同级）添加re_path

from django.urls import re_path
from . import views

urlpatterns = [
    // ...
    re_path('', views.Index.as_view())  # 空表示匹配全部路由，需放在最后
]

运行django项目

python manage.py runserver 本机ipv4地址:端口号

访问项目浏览器输入本机的ip地址与端口号再加上注册的app名字，如ipv4:8000/app

若上面命令行的ip地址是0.0.0.0，则在本机上所有的ipv4地址的对应端口都能访问该项目

参考

vue+django开发配置(vue转发请求、跨域携带cookie) - 爱码网 (likecs.com)

windows下简单部署django+vue项目(打包后) - 爱码网 (likecs.com)