Я создаю простой SPA с VueJs и Webpack и хотел бы использовать/получать доступ к переменным env из моих компонентов VueJS. Я знаю, что не смогу изменить эти переменные «на лету», но вместо этого мне нужно перекомпилировать-перестроить-повторно развернуть все приложение, чтобы увидеть изменения, но пока все в порядке, поскольку на самом деле нужно показать другую информацию и/ или разделы в зависимости от среды развертывания (локальная, промежуточная, производственная).
Чтобы быть более конкретным, на данный момент я пытаюсь получить env var COMMIT_HASH
просто для отображения его, как это уже делают некоторые приложения, только для информации о разработке.
Эта переменная в первую очередь будет использоваться конвейером для промежуточного развертывания, поскольку при локальной разработке она будет не так полезна и, вероятно, вообще не будет использоваться для производственного развертывания.
Проблема в том, что я не могу понять, как получить доступ к значениям переменных env из разделов сценариев компонентов VueJS во время выполнения, поскольку process.env
— это метод Node, доступный только во время компиляции веб-пакета, а не во время выполнения.
Я думал об использовании замены строки и нашел этот вопрос, но тогда мне нужно было бы обновить скрипт Webpack для любой новой переменной env, которую мне нужно использовать, поэтому мне это кажется довольно неэлегантным.
Я также пытался загрузить все переменные env в объект js и каким-то образом передать их в файлы, компилируемые Webpack, но мне это также кажется неэлегантным/неэффективным.
Так что теперь я застрял, так как не могу понять, как получить доступ к env vars из моих компонентов VueJS во время выполнения.
В итоге я использовал string-replace-loader
с сопоставлением регулярных выражений и обратным вызовом для динамической замены.
В основном я буду использовать env.SOME_VARIABLE
в своем коде и искать/заменять его значением переменной.
По какой-то причине я не мог заставить регулярное выражение работать с \w
для соответствия символам слова и вместо этого использовал [a-zA-Z_]
.
{
test: /resources.*\.js$/,
loader: 'string-replace-loader',
options: {
search: 'env\.([a-zA-Z_]+)',
replace(match, p1, offset, string) {
return process.env[p1];
},
flags: 'g'
}
}
Поскольку это замена текста, я не могу просто присвоить значения переменной env свойствам данных компонента vue, поскольку это будет интерпретироваться как переменная:
// E.g. given env `COMMIT_HASH=some_hash`
data() {
return {
/**
* WRONG:
* this would be parsed as
* hash: some_hash
* leading to an
* Uncaught ReferenceError: some_hash is not defined
*/
hash: env.COMMIT_HASH,
/**
* RIGHT:
* wrap string to be replaced in single/double quotes so after
* replacement it became a string literal assignment.
* hash: "some_hash"
*/
hash: "env.COMMIT_HASH",
};
},
У меня была похожая проблема, мне тоже помогло