django+vue

宓季同
2023-12-01

django+vue部署

步骤:

  1. vue文件打包

  2. 将文件导入到django目录下面

vue打包:

npm run build

打包之后将生成的dist文件中是static和index.html复制到django目录中

在django目录下面创建一个文件夹(frontend),再将static下面的所有文件(image、js、fonts、css)复制到frontend文件夹中,将index.html也复制frontend文件夹中

修改项目的配置文件

settings.py
import os
import sys

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

sys.path.insert(0, os.path.join(BASE_DIR, 'apps'))
sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps'))  # 把extra_apps文件夹添加到搜索目录中

DEBUG = True

ALLOWED_HOSTS = ['*']

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'xadmin',
    'crispy_forms',
    'DjangoUeditor',
    'corsheaders',
    # 'banner',
    # 'gsname',
    'company'
]

ROOT_URLCONF = 'portal.urls'
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'frontend')],  
        #这里要修改为frontend
        'DIRS': [os.path.join(BASE_DIR, 'frontend')],
    },
]
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    # os.path.join(os.path.join(BASE_DIR, 'static'))
    os.path.join(BASE_DIR,"frontend")
]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

url.py

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

未完待续。。。

 类似资料: