Как мне развернуть Vue js SPA на моем сервере Django?

Question

В настоящее время я следую этому руководству по интеграции моего внешнего интерфейса Vue.js с моим внутренним интерфейсом Django: https://medium.com/@williamgnlee/simple-integrated-django-vue-js-web-application-configured-for-heroku-deployment-c4bd2b37aa70

Сейчас я просто хочу иметь возможность отображать шаблон Vue.js по умолчанию index.html страницы на моем сервере Django по адресу http://localhost:8000/

Я использовал django-admin startproject django-vue-template для инициализации Django, а во вновь созданной папке django-vue-template я запустил vue create . для инициализации VueCLI.Затем я запустил npm run build, поэтому дерево папок моего проекта теперь выглядит как this .

Я также добавил эти изменения в мои settings.py:

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

кака также эти изменения в моем urls.py:

urlpatterns = [
  path('admin/', admin.site.urls),
  url(r'^$', TemplateView.as_view(template_name='index.html')),
]

Согласно руководству, я уже должен увидеть страницу Vue.js index.html на http://localhost:8000/когда я запускаю python manage.py runserver, но ничего не рендерится, кроме белого экрана, и когда я проверяю консоль, я засыпаю с ошибкой 404, как показано здесь .

Кажется, Джанго может найтиmy index.html, но он не может найти и импортировать файлы css и js, необходимые для работы его функции SPA.