怎么在Django中整合Vue項目

這篇文章將為大家詳細講解有關怎么在Django中整合Vue項目，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

隨著Vue的流行，很多人想要在自己的Django項目中使用Vue，而大多數都是更改Vue的"{{ data }}"，來避免與Django的template數據沖突問題。 其實有更好的方法，直接在Django中使用Vue/Cli

1. 刪除Django的templates文件夾

2. 使用Vue在Django項目下創建一個templates的項目

3. 在settings.py中修改TEMPLATES

'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates']

4. 在項目的urls.py中加入

from django.views.generic.base import TemplateView
from django.urls import path, re_path

urlpatterns = [
	path('', TemplateView.as_view(template_name='dist/spa/index.html')),
	re_path('^css/.*$', views.css, name='css'),
	re_path('^js/.*$', views.js, name='js'),
	re_path('^fonts/.*$', views.fonts, name='fonts')
]

5. 在項目views.py中加入

from django.http import StreamingHttpResponse
from django.conf import settings
from wsgiref.util import FileWrapper
import mimetypes

async def css(request):
    path = str(settings.BASE_DIR) + '/templates/dist/spa' + request.path_info
    content_type, encoding = mimetypes.guess_type(path)
    resp = StreamingHttpResponse(FileWrapper(open(path, 'rb')), content_type=content_type)
    resp['Cache-Control'] = "max-age=864000000000"
    return resp

async def js(request):
    path = str(settings.BASE_DIR) + '/templates/dist/spa' + request.path_info
    content_type, encoding = mimetypes.guess_type(path)
    resp = StreamingHttpResponse(FileWrapper(open(path, 'rb')), content_type=content_type)
    resp['Cache-Control'] = "max-age=864000000000"
    return resp

def fonts(request):
    path = str(settings.BASE_DIR) + '/templates/dist/spa' + request.path_info
    content_type, encoding = mimetypes.guess_type(path)
    resp = StreamingHttpResponse(FileWrapper(open(path, 'rb')), content_type=content_type)
    resp['Cache-Control'] = "max-age=864000000000"
    return resp

6. 在項目__init__.py中加入

import mimetypes
mimetypes.add_type("text/css", ".css", True)
mimetypes.add_type("text/javascript", ".js", True)

配置說明

• 1，2，3步驟是讓django在templates里面去尋找html

• 第四步寫個path，因為Vue打包出來的項目會在templates/dist下面，使用TemplateView是讓Django直接展示這個index.html，為何我的是SPA，因為我設定打包出來的文件夾是SPA，即templates/dist/spa/index.html，這個根據你們自己的index.html路徑去修改就好了

• 第四步寫個re_path，是因為vue打包出來的項目，靜態文件路徑和django的靜態文件路徑不同，例如“127.0.0.1:8088/static/xxx.js"是django的靜態文件路徑，而"127.0.0.1:8088/xxx.js"是Vue打包出來的頁面的靜態文件路徑，所以需要寫個url去找到這些文件

• 第五步是在views.py中找到這個靜態文件文件的路徑，然后然后讀取，再以流傳輸的形式傳給前端，一定要加max-age，這樣前端就會緩存下來

• 第六步是啟動項目的時候，初始化css和js文件，因為有時候，css和js文件會被讀成text文件，這樣就會前端報錯，所以在初始化的時候，就需要把這些后綴的文件再定義一遍。

這樣一套下來，你就可以在templates文件夾里面寫vue，在項目文件夾下面寫django了，希望這套方案可以完美的解決你們現在遇到的問題。

關于“怎么在Django中整合Vue項目”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。