Vue項目打包到django部署

前言

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

測試所使用框架版本 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