Vue專案打包到django部署

前言

Vue專案一般用於實現前端的單頁面富應用，其打包後的檔案可簡單看作靜態檔案，所以可以通過Nginx部署，當然也可以通過django部署(畢竟本質上還是一個html檔案及各CSS,JS檔案的集合)。通過django部署還可以省去一些跨域的麻煩，不過前後端的耦合性就比完全分開部署的差一點。

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

Vue打包

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

修改為

module.exports = {
  assetsDir: 'static',// 靜態資源打包輸出目錄 (js, css, img, fonts)，相應的url路徑也會改變
};

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

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

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

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

沒修改的

修改後的

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

django配置

dist檔案複製到專案目錄下(與app同級)

settings配置如下

STATIC_URL = '/static/'

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

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'),
                 os.path.join(BASE_DIR,'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',
            ],
        },
    },
]

如果換成生產環境的話還要修改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，這三個配置詳細說明可參考

https://blog.csdn.net/alxandral_brother/article/details/52202270

使用

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

如有紕漏，歡迎斧正

參考目錄

https://www.cnblogs.com/semishigure/p/10219408.html

https://blog.csdn.net/alxandral_brother/article/details/52202270