此教程是為了記錄自己在結(jié)合項(xiàng)目的過程中遇到問題的解決方法
創(chuàng)建VueCli3項(xiàng)目
我用的是ant design vue框架所以安裝就是按照它文檔寫的來的
// 安裝cli3
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
注意：如果安裝了cli2需要卸載之后再安裝cli3
$ vue create frontend // 創(chuàng)建一個(gè)叫demo的項(xiàng)目
創(chuàng)建Django項(xiàng)目
// 創(chuàng)建project
django-admin startproject everything
cd demo
python manage.py startapp backend
劃重點(diǎn)-正文開始了
1.配置首頁url
# django項(xiàng)目目錄下的urls.py爽待，讓首頁顯示打包的index.html文件
from django.views.generic import TemplateView
path('', TemplateView.as_view(template_name="index.html"))
2.設(shè)置setting配置項(xiàng)
# 基本路徑
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# 前端路徑
FRONTEND_ROOT = 'frontend/dist'
# 靜態(tài)資源地址
STATIC_URL = '/static/'
# 模塊資源引用地址
STATICFILES_DIRS = (
os.path.join(BASE_DIR, FRONTEND_ROOT),
os.path.join(BASE_DIR, FRONTEND_ROOT + '/static/'),
)
# 項(xiàng)目ulrs地址，每個(gè)人的項(xiàng)目地址前綴是不一樣的
ROOT_URLCONF = 'everything.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['frontend/dist'], # 路徑指向前端打包文件dist
'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',
],
},
},
]
- vue設(shè)置build配置項(xiàng) vue.config.js
/* django會(huì)認(rèn)static文件夾抹恳，所以沒有的話需要在vue.config.js里面配置。
因?yàn)関uecli3沒有vue.config.js文件削葱，所有需要手動(dòng)創(chuàng)建
*/
module.exports = {
// 輸出目錄
assetsDir: 'static',
};
- 解決兩個(gè)環(huán)境之間的跨域問題
安裝django-cors-headers
pip install django-cors-headers
# 列表有序加載洒扎，順序不能錯(cuò)
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
# 允許跨域的域名
CORS_ORIGIN_WHITELIST = (
'127.0.0.1:8081', # Frontend
'127.0.0.1:8080', # Backend
'127.0.0.1:8000', # Frontend on dev mode
)
# 設(shè)置允許訪問的方法
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
# 設(shè)置允許的header
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
'token'
)
總結(jié)
本地結(jié)合步驟大概就是這樣，但是結(jié)合完之后如果要是用pycharm啟動(dòng)項(xiàng)目時(shí)可能會(huì)發(fā)現(xiàn)django指向的是你的dist打包文件的index.html哈肖，這樣的話對(duì)于調(diào)試前端項(xiàng)目來說非常不友好躬拢，所以目前我的解決辦法就是躲履，在本地的前端項(xiàng)目中啟動(dòng)服務(wù)，再在django項(xiàng)目中啟動(dòng)服務(wù)估灿，兩者之間也是可以滿足聯(lián)調(diào)關(guān)系的崇呵，在前端項(xiàng)目完成后缤剧，再build包然后更新dist文件夾馅袁。
??有問題請(qǐng)?jiān)u論，看到會(huì)及時(shí)解答疑問荒辕。
