{"data":{"markdownRemark":{"html":"

使用脚手架生成vue项目

\n
vue-init webpack frontend
\n

修改django项目静态文件setting.py

\n
TEMPLATES = [\n    {\n        # 'DIRS': [os.path.join(BASE_DIR, 'templates')]\n        'DIRS': ['frontend/dist'],\n    },\n]\n# 添加静态文件\nSTATICFILES_DIRS = [\n    os.path.join(BASE_DIR, \"frontend/dist/static\"),\n]
\n

添加前端页面修改django项目urls.py文件

\n
from django.views.generic import TemplateView\n\nfrom django.urls import path,include\n\nfrom django.conf.urls import  include, url\n\nurlpatterns = [\n    url(r'^admin/', admin.site.urls),\n    url(r'^api/', include(myapp.urls)),\n    url(r'^$', TemplateView.as_view(template_name=\"index.html\")),\n]
\n

解决跨域

\n

Django的第三方包django-cors-headers来解决跨域问题：

\n
 pip install django-cors-headers
\n

settings.py 修改：

\n
# 注意中间件的添加顺序\nMIDDLEWARE = [\n    'django.middleware.security.SecurityMiddleware',\n    'django.contrib.sessions.middleware.SessionMiddleware',\n    'corsheaders.middleware.CorsMiddleware',\n    'django.middleware.common.CommonMiddleware',\n    'django.middleware.csrf.CsrfViewMiddleware',\n    'django.contrib.auth.middleware.AuthenticationMiddleware',\n    'django.contrib.messages.middleware.MessageMiddleware',\n    'django.middleware.clickjacking.XFrameOptionsMiddleware',\n]\n\nCORS_ORIGIN_ALLOW_ALL = True
","frontmatter":{"title":"使用vue框架进行前端渲染"}}},"pageContext":{"slug":"/build/repo/Django/3、使用vue进行前端渲染/"}}