Как использовать локальный API с приложением Vue, работающим на другом порту?

Я помогаю кому-то настроить и запустить приложение Django + Vue, и одна проблема, с которой мы сталкиваемся, заключается в том, как сделать горячую перезагрузку приложения Vue, одновременно имея возможность взаимодействовать с локальным сервером Django.

В рабочей среде сервер Django будет обслуживать приложение Vue, а npm run build помещает активы приложения Vue в папки templates/ и static/ проекта Django.

Когда мы запускаем сервер Django (python manage.py runserver), сервер работает на localhost:8000. Когда мы запускаем npm run serve (чтобы воспользоваться преимуществами горячей перезагрузки), приложение Vue обслуживается в localhost:8080. Если я делаю запрос GET из приложения Vue к /exampleEndpoint, он переходит к localhost:8080/exampleEndpoint, таким образом, не затрагивая сервер Django.

Как правильно заставить приложение Vue работать с приложением Django?


python django vue.js vuejs2 vue-cli
person Nathan Wailes    schedule 12.11.2018    source источник
comment
Можете ли вы предоставить минимальный, полный, поддающийся проверке пример? Трудно предложить какую-либо помощь без кода и трассировки стека.   -  person Mike Tung    schedule 12.11.2018
comment
@MikeTung Это для проекта Django + Webpacked vue-cli, мне кажется, что минимальный пример будет включать десятки файлов. Если что-то из того, что я написал, непонятно, дайте мне знать.   -  person Nathan Wailes    schedule 12.11.2018
comment
Хорошо... как вы ожидаете, что мы узнаем, какие вызовы вы делаете, и является ли это синтаксической ошибкой, ошибкой конфигурации или просто полным отсутствием файла?   -  person Mike Tung    schedule 12.11.2018
comment
Сделайте запрос к :8000/exampleEndpoint при разработке или, что еще лучше, обслуживайте как за nginx, так и заставьте nginx направлять запросы в правильный процесс.   -  person Iain Shelvington    schedule 12.11.2018
comment
@IainShelvington Спасибо, вы знаете, как я могу изменить порт в зависимости от переменной конфигурации / среды?   -  person Nathan Wailes    schedule 12.11.2018
comment
Почему вы хотите использовать Django для обслуживания приложения Vue в первую очередь? Вы можете полностью следовать основному принципу разделения бэкэнда и фронтенда. Подавайте Django как обычно и Vue с e. грамм. Express через Node, используйте RESTful API в Django, чтобы сделать данные доступными для использования Vue (например, через Axios).   -  person Bennett Dams    schedule 12.11.2018
comment
@BennettDams Человек, которому я помогаю, хотел сделать это таким образом, но, возможно, на этом этапе стоит снова поднять этот вопрос.   -  person Nathan Wailes    schedule 12.11.2018
comment
@NathanWailes Если вы вкладываете время и усилия во что-то, делайте это правильно. Использование Django для обслуживания Vue SPA похоже на прикрепление рулевого колеса к крыше автомобиля, чтобы управлять им.   -  person Bennett Dams    schedule 12.11.2018

Ответы (2)


arrow_upward
3
arrow_downward

Если вы используете axios, вы можете сделать:

axios.defaults.baseURL = '//localhost:8000/';

Если не указывать http/s и начинать с двойной косой черты, текущий протокол будет унаследован в URL-адресе.

Это приведет к axios.post('/api/example') запросу http(s)://localhost:8000/api/example, если все ваши URI запроса начинаются с одной косой черты.

Изменить: вам нужно будет разрешить заголовки CORS. Для этого есть пакет django-cors-headers. Он очень прост в использовании и отлично работает: https://github.com/ottoyiu/django-cors-headers/

person Marc    schedule 12.11.2018
comment
Вы также можете настроить devserver-proxy в vue.config.js, чтобы предотвратить проблемы совместного использования ресурсов между источниками (CORS) cli .vuejs.org/config/#devserver-proxy - person thibautg; 13.11.2018
comment
но вы не упомянули, куда поместить эту строку 'axios.defaults.baseURL = '//localhost:8000/'' ?? это неполный ответ - person Nitin Nanda; 10.10.2020
comment
@NitinNanda нет единого ответа на этот вопрос в отношении того, куда я это поместил, зависит от того, как вы реализуете аксиомы, если вы используете скрипты, импорт es6 или несколько экземпляров, эти факторы будут меняться там, где вам нужно их поместить ... Этот ответ указывает вам направление настройки, которая вам может понадобиться для решения проблемы с базовым URL-адресом, а не для ее реализации, где вы указываете, что это зависит от вас, чтобы выяснить для вашего конкретного случая использования или задать отдельный вопрос о том, как использовать его для вашего варианта использования. - person Marc; 10.10.2020

arrow_upward
-2
arrow_downward

Решение, к которому мы пришли (которое на самом деле не отвечает на заголовок этого вопроса, но решает основную проблему), заключалось в том, чтобы не использовать сервер горячей перезагрузки vue-cli, а вместо этого вносить изменения в файлы внешнего интерфейса, запускающие npm run build, так что внешнее приложение будет обслуживаться сервером Django (так как оно будет в производстве). Для этого я установил пакет «npm-watch» и заставил «npm run watch» просматривать все файлы .vue, .scss и .js в каталоге /src. Коммит ниже.

введите здесь описание изображения

person Nathan Wailes    schedule 13.11.2018
comment
Подходящим способом сделать это является ИМО, чтобы сделать, как сказал @thibautg, использовать прокси. - person lbris; 19.02.2021