VueJS & Webpack: ENV var недоступен из встроенного проекта - PullRequest
Новая
       33

VueJS & Webpack: ENV var недоступен из встроенного проекта

0 голосов
/ 18 мая 2018

Я работаю над приложением с интерфейсом vuejs и бэкэндом nodejs.Мой веб-интерфейс отправляет запросы API https на сервер.Я начал свой проект с Vue-Cli и Webpack.Мне нужно получить URL API внутреннего интерфейса из переменной env (BACKEND_URL).Так как я использую webpack, я добавил эту строку в config / prod.env.js: 

module.exports = {
  NODE_ENV: '"production"',
 -> BACKEND_URL: JSON.stringify(process.env.BACKEND_URL)
}

Он работает безупречно в режиме разработки с использованием webpack-dev-server.Я передаю файл env var через docker-compose: 

environment:
            - BACKEND_URL=https://whatever:3000

Но когда я запускаю сборку, я использую nginx для обслуживания статических файлов (но проблема та же, что и в расширении сервера Visual Studio Code Live).Я отправляю BACKEND_URL env var так же, как и раньше.Дело в том, что process.env.BACKEND_URL не определен в приложении (но определен в контейнере) !!Поэтому я не могу сделать http-вызовы с бэкэнда :( Я изо всех сил пытаюсь найти проблему, пожалуйста, не будьте грубыми с ответами. Спасибо

Ответы [ 3 ]

0 голосов
/ 20 мая 2018

Сделайте это: https://www.brandonbarnett.io/blog/2018/05/accessing-environment-variables-from-a-webpack-bundle-in-a-docker-container/

Если я правильно понимаю вашу проблему, вы обслуживаете пакет веб-пакетов с помощью nginx и пытаетесь получить доступ к переменной окружения из этого пакета.

К сожалению, это не совсем так.Ваш файл JS не имеет доступа к среде, поскольку это ресурс, который был доставлен клиенту.Я предложил решение, которое также предоставляет эти переменные env вместе с пакетом в отдельном файле JS, который создается при запуске контейнера.

0 голосов
/ 14 мая 2019

Из документов VueJS: https://cli.vuejs.org/guide/mode-and-env.html

Использование переменных Env в коде на стороне клиента

Только переменные, начинающиеся с VUE_APP_, будут статически внедряться вклиентский пакет с webpack.DefinePlugin.Вы можете получить к ним доступ в коде вашего приложения: 

console.log(process.env.VUE_APP_SECRET)

Во время сборки process.env.VUE_APP_SECRET будет заменено соответствующим значением.В случае VUE_APP_SECRET = секретный он будет заменен на «секретный».

Так что в вашем случае следующее должно быть сделано.Однажды у меня была такая же проблема в моем проекте, который я начал с vue / cli и vue create project ...

VUE_APP_BACKEND_URL=https://whatever:3000
0 голосов
/ 18 мая 2018

Они не "переведены" во время сборки, это то, что происходит с вами.В среде узла, когда вы запрашиваете process.env, он отображает все переменные среды, доступные в системе, это правда.Но веб-приложение не имеет доступа к process.env, когда оно выполняется.Вам нужен способ их перевода во время сборки.

Для этого вам нужно использовать DefinePlugin.Он переводит что-либо во время сборки и записывает волшебную строку, где была эта другая вещь.

Используя собственный пример: 

module.exports = {
  NODE_ENV: '"production"',
  BACKEND_URL: JSON.stringify(process.env.BACKEND_URL)
}

Если вы сделаете это во время сборки, без DefinePlugin, веб-пакет выигралне знаю, что с ним делать, и это будет простая строка.

Если вы используете DefinePlugin: 

new webpack.DefinePlugin({
  "process.env.BACKEND_URL": JSON.stringify(process.env.BACKEND_URL)
});

Делая это, вы разрешаете веб-пакету переводить этово время сборки.

...