一、创建项目
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目录
};