Vue專案打包到django部署

vue專案一般用於實現前端的單頁面富應用，其打包後的檔案可簡單看作靜態檔案，所以可以通過nginx部署，當然也可以通過django部署(畢竟本質上還是乙個html檔案及各css,js檔案的集合)。不過前後端的耦合性以及效能就比nginx動靜分離的差一點。但平時開發的時候可以這樣部署，十分方便快捷。

測試所使用框架版本 django 3.06，vuecli 3.0

修改vue.config.js(vuecli3.0新建的專案裡沒有，要在專案目錄新建乙份)

修改為

module.exports =
;

然後npm run build，打包出來的dist結構如下

那麼問題來了，為什麼要修改assetsdir呢，如不修改，結構如下

一看這兩個區別好像只是把簡單地將靜態檔案輸出在乙個static檔案而已，那麼我們是否可以不修改，自己新建乙個static檔案然後手動將靜態檔案放進去呢。有些教程也是這樣教的，著實坑了我一把。其實assetsdir屬性和打包後的靜態檔案請求路徑有關的。

我們看看修改與不修改assetsdir，它們靜態檔案請求路徑是咋樣的

沒修改的

修改後的

他們的路徑就差了個static，如果你用nginx部署啥的可能不會出問題，但如果你用整合至django部署的話問題就大了，就算django的settings配置好了，也會找不到靜態檔案的。

settings配置如下

static_url =
'/static/'
staticfiles_dirs =
[ os.path.join(base_dir,
'static'),
# 專案缺省會有的路徑，如果你部署的不僅是前端打包的靜態檔案，專案目錄static檔案下還有其他檔案，最好不要刪
os.path.join(base_dir,
"dist/static"),
# 加上這條
]templates =[,},]

如果換成生產環境的話還要修改static_root

static_root 是在部署靜態檔案時(pyhtonmanage.pycollectstatic)所有的靜態文靜聚合的目錄,static_root要寫成絕對位址,在這裡,比如我的專案mysite是/home/mysite/

那麼static_root 為 /home/mysite/collect_static/

當部署專案時,在終端輸入:

python manage.py collectstatic1

django會把所有的static檔案都複製到static_root資料夾下

static_root，static_url，staticfiles_dirs，這三個配置詳細說明可參考

配置url，編寫view就不贅述了，和平常的流程一致。

如有紕漏，歡迎斧正

參考目錄

Vue專案打包到django部署

vue 專案打包

vue專案打包

Vue專案打包

Vue專案打包到django部署

vue 專案打包

vue專案打包

Vue專案打包

相關推薦