Не удалось прочитать переменную среды в contect VueJS

#vue.js #environment-variables

#vue.js #переменные среды

Вопрос:

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

Component.vue

 website: 'testing-hard-reality'

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

.env.local

 VUE_APP_WEB_SITE: 'testing-hard-reality'

В компоненте переменная используется как:

 website: process.env.VUE_APP_WEB_SITE

В моей консоли я получаю сообщение об ошибке как

[Предупреждение Vue]: ошибка в обработчике v-on: «Ошибка: имя веб-сайта не задано»

Пожалуйста, скажите мне, что делать.

1. Пожалуйста, полная воспроизводимая демонстрация

2. переменная env должна быть такой, как VUE_APP_WEB_SITE=testing-hard-reality в env.local файле. его разделяют = operator => key=value

3. Спасибо @Nilesh, я изменил это, но все равно получаю ту же ошибку

Ответ №1:

Создайте в папке того же уровня src файл

.env.development.local используется для локальной работы

.env.production.local используется для производства

Добавьте в файл свою переменную env

 VUE_APP_MY_VARIABLE_NAME = my-value-here

VUE_APP_* часть важна, потому что все переменные env в проекте vue должны начинаться с этого префикса.

Теперь, чтобы получить доступ к этому значению, выполните:

 process.env.VUE_APP_MY_VARIABLE_NAME

ВАЖНЫЙ ШАГ

Всякий раз, когда вы изменяете .env файлы, вам приходится останавливать свой сервер и запускать его снова, чтобы получить изменения env.

Ответ №2:

Я предполагаю, что вы используете vue-cli для создания своего проекта vue. В документах vue-cli я обнаружил, что грамматика env.local будет

 VUE_APP_WEB_SITE=testing-hard-reality

не ваша демонстрация: VUE_APP_WEB_SITE: 'testing-hard-reality'

ссылка: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

1. @app_er Нам нужна полная воспроизводимая демонстрация, чтобы узнать, что произошло

2. Я только что попробовал ваш ответ, и все равно получаю ту же ошибку, так что теперь, что именно вы хотели?

3. Привет, пожалуйста, создайте простой репозиторий github, который может воспроизвести вашу проблему, чтобы я мог выполнять отладку на своем локальном компьютере.