python框架django中結合vue進行前后端分離

一、創建django項目

1.django-admin startproject mysite   # 創建mysite項目

2.django-admin startapp app01# 創建app01應用

 二、安裝vue

• 安裝vue-cli：npm install -g vue-cli (Vue-cli是Vue的腳手架工具，-g表示在全局下安裝vue-cli)
• 安裝webpack： npm install webpack -g  (包管理工具，主要是打包和解包用的)
• 創建項目：vue init webpack my-vue(my-vue是項目名稱，是隨意取的)

環境配置 :

• 切換到所創建的項目目錄下： cd my-vue
• 安裝啟動模塊：npm install
• 啟動項目：npm run dev

如果可以運行成功，證明當前vue項目是沒有問題

 

 

 

四：vue項目寫完后，打包vue項目，然后修改django配置，將vue集成到django中

npm run build

注意：只有build之后啟動django的時候，你在vue中修改的才能生效，否則無效。這個在cmd中的使用。

在python下的項目文件夾下的-settings.py中配置：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'frontend/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的靜態文件夾的目錄配置到項目中【添加靜態文件夾路徑】

STATIC_URL = '/static/'

STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'frontend/dist/static/'), # 添加內容
]

五：修改django的主目錄的urls文件 

from django.contrib import admin
from django.urls import path
from blog import views
from django.views.generic.base import TemplateView

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

六：啟動django服務，訪問localhost:8000 則可以出現vue的首頁

啟動django

python manage.py runserver
http://127.0.0.1:8000/#/login

 

 

 

 訪問出現vue項目的界面，就已經成功了！

七：有時候並不能直接訪問出首頁，原因是路徑不對

 

有的會設置的有前綴，需要把前綴去掉，重新打包才能使用

 

打包的時候不需要把之前的打包內容刪除，直接重新打包，會有對應的打包記錄

 

 

 

八：vue打包之后經常會出現fontawesome圖標庫不能使用的情況

打包之后，需要手動吧fontawesome引入的css文件路徑更改，把原來的

url(/static/fonts/fontawesome-webfont.b06871f.ttf),
換成
url(../fonts/fontawesome-webfont.b06871f.ttf),

fontawesome小圖標就可以顯示出來了 

本篇博客參考：https://www.cnblogs.com/ranyihang/p/10694635.html