Django2與@Vue/Cli3整合--訪問靜態文件404問題

我們首先簡要來看下Django2與@Vue/Cli3如何整合

---

1. 創建Django2項目
   通過django-admin startproject mysite命令創建
2. 創建後端服務app
   cd mysite目錄後,django-admin startapp backend
3. 創建vue項目
   vue create frontend

通過三個步驟後，我們可以看到在mysite目錄下存在frontend,backend,manage.py,db.sqlite3平級目錄。

下面就是django的配置，打開settings.py(在backend目錄下)

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['frontend/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_URL = '/static/'
添加這行
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist"),
]

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html')),  # 添加這行
]

下面就npm run build，在frontend下會生成dist目錄，起django項目，python manage.py runserver，訪問http://127.0.0.1:8000，驚奇的發現，首頁index.html是可以訪問,但是綁定的靜態文件全都404

發現問題

---

爲啥會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文件夾的，官方文檔

解決問題

---

在frontend目錄下創建vue.config.js

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

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