При обычной разработке vue мы можем использовать одно и то же поле на нескольких страницах или корневой путь веб-страницы, что нелегко поддерживать, когда они напрямую написаны в коде.При внесении последующих изменений необходимо изменить многие страницы, поэтому нам интересно, есть ли способ определить глобальную переменную, которую можно использовать непосредственно в каждом файле vue.Эта статья о том, как использовать файл .env для определения глобальных переменных.
1. Что такое файл .env?
В проекте vue env — это глобальный файл конфигурации, в котором могут храниться переменные в разных средах. Используйте vue-cli для сборки проекта, и файл .env будет создан в корневом каталоге по умолчанию.
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略Значение режима может быть development (среда разработки), production (производственная среда), test (тестовая среда), и загружаются они только в соответствующем режиме.
2. Настройте файл .env
Мы настраиваем глобальные переменные в файле .env, которые необходимо определить в виде пар ключ-значение, таких как
VUE_APP_BAIDU_URL='www.baidu.com'И имя переменной должно начинаться с VUE_APP_ , иначе при последующем получении переменной будет получено значение undefined.
VUE_APP_TEST_SUCCESS='www.baidu.com' //正确
APP_TEST_SUCCESS='www.baidu.com' //错误
TEST_SUCCESS='www.baidu.com' //错误Примечание. Файл среды .env загружается с помощью команды vue-cli-service, поэтому при изменении файла среды необходимо перезапустить службу.
3. Vue получает глобальные переменные
Переменная VUE_APP_BAIDU_URL='www.baidu.com' установлена в файле .env ,
В vue вам нужно только использовать process.env.VUE_APP_BAIDU_URL , чтобы получить его. Не нужно импортировать другие пакеты, очень удобно.