VueJS - конфигурация прокси vue.config.js для сборки

Question

В настоящее время я использую devServer{proxy:{...}} в vue.config.js для настройки прокси-сервера для вызовов API для избежания проблем с CORS в моем приложении.Он отлично работает, когда я запускаю npm run serve в localhost.

Теперь мне нужно развернуть приложение на хосте, поэтому я запускаю npm run build, меняю URL моих Ajax-вызовов, и он не работает ...Так что мне действительно нужно настроить мой прокси для развертывания (сборки), а не для devServer.

Как правильно это сделать?

Я уже пробовал: server{proxy:{...}}и build{proxy:{...}}, но ни один из них не разрешен при запуске npm run build.

Спасибо!

Answer 1

Vue CLI по умолчанию не будет поставлять веб-сервер, такой как прокси, он будет развертывать связанный Javascript в каталоге dist/.

1. Прокси-сервер не предназначен для развертывания в рабочей среде, поэтому вы не можете найти информацию о его развертывании.
2. Если вы обслуживаете статический каталог /dist, найдите инструкции здесь для вашего провайдера (S3, Netlify, Firebase) и следуйте им.

Более длинный ответ:

Вы столкнулись с проблемой, поскольку прокси не должен использоваться для производства. CLI прокси Vue поставляется с webpack-dev-server . Он используется Vue CLI, чтобы вы могли локально обслуживать файлы Javascript во время разработки.

Существуют уязвимости в безопасности, если вы используете в prod webpack-dev-server (он же прокси). Не делай этого.

Вместо этого вам нужно найти хостинг-провайдера, которого вы используете, и следовать инструкциям здесь: https://cli.vuejs.org/guide/deployment.html, чтобы развернуть ваше приложение. Если ваше приложение является личным или может быть общедоступным, я предлагаю использовать Netlify .

Например ... В моей производственной настройке мы развертываем в корзину AWS S3 и предоставляем контент либо с AWS Cloudfront CDN, либо с Fastly CDN. Наши URL-адреса API всегда являются производственными серверами, и мы используем этот параметр в прокси для передачи на наш локальный сервер

Answer 2

Вы можете попробовать другой подход, который добавляет URL-адреса API к файлам .env

Если вы используете Vue CLI, вы можете создать файлы .env.development и .env.production и указать URL-адреса API для разработки и производства, например:

.env.development

VUE_APP_API_URL=http://localhost:8080/api

.env.production

VUE_APP_API_URL=http://myapp.com/api

В файлах вашего проекта вы можете получить доступ к переменным, поставив ключевое слово VUE_APP_ , например;

Ваш файл для отправки запросов API

const url = process.env.VUE_APP_API_URL
const res = axios.get(url, config).then (...)
                                  .catch(...)

Вы можете искать больше из официальных документов Vue

Чтобы решить проблему с CORS, я могу дать вам несколько советов.

1. Разделите ваше приложение на пакеты с именами сервер и клиент
2. Переместить все, что связано с vuejs, в папку клиента
3. Переместить server.js в папку сервера
4. Реализация cardconnect внутри server.js
5. Создание API-интерфейса nodejs через expressjs и перемещение логики подключения карты к контроллерам (конечным точкам)
6. Использование API-интерфейса nodejs, который реализует cardconnect через vue.js (это решит проблему cors, поскольку вы не делаете запросы от vuejs, а запускаете реализацию cardconnect через node.js)
7. Приложение Serve Vue на сервере Node.js