最近接到一個(gè)任務(wù)，就是用django后端，前段用vue，做一個(gè)普通的簡(jiǎn)單系統(tǒng)，我就是一搞后端的，聽到vue也是比較震驚，之前壓根沒接觸過vue?？戳藇ue的一些文檔，還有一些項(xiàng)目，先說一下django與vue的完美結(jié)合吧！

首先是創(chuàng)建一個(gè)django項(xiàng)目

django-admin startproject mysite # 創(chuàng)建mysite項(xiàng)目 django-admin startapp blog # 創(chuàng)建blog應(yīng)用

一、接下來就是安裝關(guān)于vue 的東西了

1、首先安裝node.js，官網(wǎng)地址：https://nodejs.org/zh-cn/download/

2、使用npm淘寶鏡像，避免npm下載速度過慢的問題? ?npm?install?-g?cnpm?--registry=https://registry.npm.taobao.org

3、使用cnpm 下載vue-cli? ? ? ?cnmp install -g @cue/cli

二、在django項(xiàng)目中創(chuàng)建vue項(xiàng)目

首先，進(jìn)去django項(xiàng)目的項(xiàng)目目錄中，執(zhí)行：

vue init?webpack firstvue## firstvue為前端項(xiàng)目的名稱，可自定義。創(chuàng)建的項(xiàng)目會(huì)跟django中的app一樣的目錄登記。類似一個(gè)前端app一樣。

mysite 文件夾? blog 文件夾? ?和 firstvue文件夾? 要在同一目錄級(jí)別

在創(chuàng)建時(shí)，會(huì)彈出很多選擇項(xiàng)，根據(jù)自己需求自定義修改。也可以全部回車，使用默認(rèn)的。這里我就直接全部回車。

三、編寫vue前端項(xiàng)目，直接編寫就是，調(diào)試則可以執(zhí)行。也可先不編寫，跳過這一步

cd firstvue##?進(jìn)入到上一部創(chuàng)建的firstvue項(xiàng)目中?? cnpm?install????????##?安裝需要的依賴模塊?? cnpm?run?dev????????##?運(yùn)行調(diào)式的服務(wù)，會(huì)啟動(dòng)一個(gè)web服務(wù)，訪問localhost:8080?即可調(diào)式?? 四、vue項(xiàng)目寫完后，打包vue項(xiàng)目，然后修改django配置，將vue集成到django中

cnpm?run?build????????##?打包vue項(xiàng)目，會(huì)將所有東西打包成一個(gè)dist文件夾??

五、接下來就是配置django中的setting文件了：

六、修改django的主目錄的urls文件：

html文件和static同級(jí)目錄

七、啟動(dòng)django服務(wù)，訪問localhost:8000 則可以出現(xiàn)vue的首頁(yè)。

python?manage.py?runserver?

?

?

BUG解決：

發(fā)現(xiàn)問題

---

為啥會(huì)404，我們先看下index.html的文件

截取其中一段 <link href=/css/login.d7cd78d9.css rel=prefetch>

按這個(gè)相對(duì)路徑看，index.html與css是同級(jí)目錄，那href不是應(yīng)該是./css/login.d7cd78d9.css(多個(gè)點(diǎn))，修改，重新運(yùn)行，發(fā)現(xiàn)還是404.

我們?cè)倏纯磀jango訪問靜態(tài)文件的配置，是訪問dist目錄下似乎沒毛病，但是我們忘記了還有STATIC_URL是訪問帶static文件夾的，官方文檔

解決問題

---

在frontend目錄下創(chuàng)建vue.config.js

module.exports = {assetsDir: 'static', #指定`build`時(shí),在靜態(tài)文件上一層添加static目錄 };

接下來就是重新build（index.html的引用地址也同步改了），起django，訪問，解決問題

總結(jié)

以上是生活随笔為你收集整理的django 与 vue 的完美结合的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。