整合vue_django与vue项目整合

一、创建项目

1.创建Django项目
通过django-admin startproject djTestDemo命令创建名为djTestDemo的项目

创建app
cd djTestDemo目录后,通过

django-admin startapp djapp

创建名为djapp的应用。

2.创建vue项目vue create vueapp

二、修改django配置

settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['vueapp /dist'],  # 增加vueapp
        '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/' 下增加

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "vueapp/dist"),
]

urls.py

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView #add

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html')),  # add
]

cd vueapp运行npm run build就会生成dist目录，然后返回运行django项目，python manage.py runserver 就可以访问index.html了。

解决404

在vueapp目录下创建vue.config.js

module.exports = {
    assetsDir: 'static',  #指定`build`时,在静态文件上一层添加static目录
};