最近接到一個任務，就是用django后端，前段用vue，做一個普通的簡單系統，我就是一搞后端的，聽到vue也是比較震驚，之前壓根沒接觸過vue。看了vue的一些文檔，還有一些項目，先說一下django與vue的完美結合吧！

首先是創建一個django項目

django-admin startproject mysite # 創建mysite項目 django-admin startapp blog # 創建blog應用

一、接下來就是安裝關于vue 的東西了

1、首先安裝node.js，官網地址：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項目中創建vue項目

首先，進去django項目的項目目錄中，執行：

vue init?webpack firstvue## firstvue為前端項目的名稱，可自定義。創建的項目會跟django中的app一樣的目錄登記。類似一個前端app一樣。

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

在創建時，會彈出很多選擇項，根據自己需求自定義修改。也可以全部回車，使用默認的。這里我就直接全部回車。

三、編寫vue前端項目，直接編寫就是，調試則可以執行。也可先不編寫，跳過這一步

cd firstvue##?進入到上一部創建的firstvue項目中?? cnpm?install????????##?安裝需要的依賴模塊?? cnpm?run?dev????????##?運行調式的服務，會啟動一個web服務，訪問localhost:8080?即可調式?? 四、vue項目寫完后，打包vue項目，然后修改django配置，將vue集成到django中

cnpm?run?build????????##?打包vue項目，會將所有東西打包成一個dist文件夾??

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

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

html文件和static同級目錄

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

python?manage.py?runserver?

?

?

BUG解決：

發現問題

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

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

按這個相對路徑看，index.html與css是同級目錄，那href不是應該是./css/login.d7cd78d9.css(多個點)，修改，重新運行，發現還是404.

我們再看看django訪問靜態文件的配置，是訪問dist目錄下似乎沒毛病，但是我們忘記了還有STATIC_URL是訪問帶static文件夾的，官方文檔

解決問題

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