Vueが作成したindex.htmlに繋がるには、以下の2つの方法があります。
Vueのアプリケーションを、Djangoのプロジェクトに組み込む
Djangoのプロジェクトとは独立して、Vueのアプリケーションを作成
Vueのアプリケーションを、Djangoのプロジェクトに組み込む場合
この場合、Vueのアプリケーションを、Djangoのプロジェクトのプロジェクトルートに配置します。たとえば、プロジェクトルートに vue_app ディレクトリを作成して、そこに Vueのアプリケーションを配置します。
次に、urls.py ファイルに、Vueのアプリケーションの URL を定義します。たとえば、以下のように定義します。
Python
from django.contrib import admin
from django.urls import path
from . import views
from .vue_app import urls as vue_urls
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index, name='index'),
path('vue_app/', include(vue_urls)),
]
この定義により、/vue_app/ にアクセスすると、Vueのアプリケーションの URLConf である vue_urls が処理されます。
Vueのアプリケーションの URLConf では、/ へのルーティングを定義します。たとえば、以下のように定義します。
Python
from django.urls import path
urlpatterns = [
path('', views.index, name='index'),
]
この定義により、/ にアクセスすると、Vueのアプリケーションの index.html がレスポンスされます。
Djangoのプロジェクトとは独立して、Vueのアプリケーションを作成する場合
この場合、Vueのアプリケーションを、Djangoのプロジェクトとは独立した場所に配置します。たとえば、プロジェクトルートとは別のディレクトリに vue_app ディレクトリを作成して、そこに Vueのアプリケーションを配置します。
次に、/vue_app/ にアクセスすると、Vueのアプリケーションの index.html をレスポンスするように、Djangoのプロジェクトの Webサーバーを設定します。たとえば、Nginx を使用している場合は、以下のように設定します。
location /vue_app/ {
alias /path/to/vue_app/;
}
この設定により、/vue_app/ にアクセスすると、/path/to/vue_app/ ディレクトリのコンテンツがレスポンスされます。
具体的には、/path/to/vue_app/index.html がレスポンスされます。