Vueが作成したindex.htmlに繋がるには、以下の2つの方法があります。

  1. Vueのアプリケーションを、Djangoのプロジェクトに組み込む

  2. 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 がレスポンスされます。


この記事が気に入ったらサポートをしてみませんか?