Вы можете выполнить эту работу двумя способами, в зависимости от того, как вы планируете развертывание в рабочей среде.
Метод 1:
Разработчик веб-интерфейса может запустить команду npm run build
, которая создаст папку с именем dist
. Вы должны обслуживать эту папку из приложения django. Выполните следующие действия в своем Django приложении:
В
settings.py
файле добавьте
VUE_FOLDER = 'PATH_TO_DIST_FOLDER/dist'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, VUE_FOLDER)],
}
В файле
urls.py
добавьте
path('', TemplateView.as_view(template_name='index.html'), name="home"
В приведенной выше строке файл Vue
index. html будет отображаться как django домашняя страница.
Таким образом, ваше производство будет иметь только один порт, который будет обслуживать только одно приложение с пользовательским интерфейсом и приложением django. Все API, которые присутствуют в urls.py
файле, могут быть доступны через пользовательский интерфейс. Не нужно беспокоиться о CORS.
Метод 2:
Пользовательский интерфейс может быть отдельным приложением, размещенным на одном порту, а ваше приложение django может быть отдельным приложением, размещенным на другом порту. , В этом случае ваше django приложение должно поддерживать CORS, поскольку все вызовы API из пользовательского интерфейса будут рассматриваться как вызовы из разных источников. Пользовательский интерфейс должен включать полный URL-путь http://django-server:port/api_name/
для доступа к API.
В обоих случаях вам не нужно использовать шаблон django, и пользовательский интерфейс может быть независимым приложением. О маршрутизации будет заботиться vue -рутер. Django приложение будет действовать как сервер и будет обрабатывать только API. Надеюсь, это поможет.