Django中整合Vue-cli，並解決各種路徑引用錯誤和跨域的問題

Django中整合Vue-cli要解決幾個問題：

一、前後端代碼放在一個項目中，方便維護；

二、Vue-cli本地調試時的接口跨域問題；

三、Vue-cli build後的文件要能直接提交後就能使用，不需要再去手動修改其中引用文件的路徑後才能提交。

步驟：

一、在目錄demo7下新建Django項目；

參考：https://blog.csdn.net/duansamve/article/details/95866997

二、在目錄demo7下建立子目錄vue，再在該目錄下搭建vue-cli項目；

參考：https://blog.csdn.net/duansamve/article/details/80466922

Django和Vue-cli搭建完成後的目錄結構如下：

三、將Django的TEMPLATES目錄指向Vue構建後的dist目錄：

demo7/demo7/setting.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['vue/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',
            ],
        },
    },
]

四、將Django的靜態文件夾目錄指向Vue構建後的dist目錄下的static目錄：

demo7/demo7/setting.py

STATIC_URL = '/static/'

# Add for vuejs

STATICFILES_DIRS = [ 
    os.path.join(BASE_DIR, "vue/dist/static"), 
]

五、將項目的訪問路徑指定爲根路徑：

demo7/demo7/urls.py

from django.urls import path, include
from django.views.generic.base import TemplateView

urlpatterns = [
    path('', TemplateView.as_view(template_name="index.html"))
]

 六、解決vue-cli構建後的index.html找不到圖標和引用的js、css文件路徑錯誤的問題：

參考https://blog.csdn.net/duansamve/article/details/107116031

七、解決vue-cli接口訪問跨域的問題，以方便本地調試，這裏採用webpack中配置代理的方法：

參考：https://blog.csdn.net/duansamve/article/details/90310911

通過以上配置後，前端就可以直接在本地開發調試，開發完後把接口名稱批量改正，然後build後就可以直接提交了。