Доступ к переменным среды в файле index.html
Я пытаюсь получить доступ к некоторым переменным среды внутри файла index.html. Доступны ли переменные среды во время сборки index.html? Я попробовал что-то в этом роде и могу распечатать журнал в консоли.
index.html
<script type = "text/javascript">
console.info('this is inside index.html');
</script>
Но когда я пытаюсь получить доступ к переменным среды, я не могу этого сделать. Я читал в нескольких местах, что это возможно, но не могу этого сделать.
.env-файл
VITE_MY_VAR = 'HELLO WORLD'
index.html
<script type = "text/javascript">
console.info('my env var', VITE_MY_VAR);
<% console.info('test', process.env['VITE_MY_VAR']) %>
</script>
Почему вы пытаетесь использовать тег <script> в своем HTML вместо того, чтобы просто использовать связанный JS-файл?
К вашему сведению, если вы включите ; в конце значений .env, оно будет включено буквально. Вам также не нужны кавычки
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
См. Замена HTML-конверта...
Vite также поддерживает замену переменных env в файлах HTML. Любые свойства в
import.meta.envможно использовать в HTML-файлах со специальным синтаксисом%ENV_NAME%.
Примечание. Для этого требуется Vite v4 или новее.
Проблема с попыткой использовать это в теге <script> заключается в цитировании и экранировании; Vite не выполняет никаких других действий, кроме прямой замены. Вам нужно будет попытаться убедиться, что в ваших значениях .env нет неэкранированных символов кавычек, когда они представлены в виде строкового литерала JavaScript.
<script>
console.info('my env var', `%VITE_MY_VAR%`); // 👈 value must be quoted
// as a string literal
</script>
Это будет непосредственно введено как
<script>
console.info('my env var', `Hello World`);
</script>
Обратите внимание (и я это часто вижу): НЕ ЗАВЕРШАЙТЕ значения .env точкой с запятой (;). Если вы это сделаете, это будет буквально включено в стоимость.
Вам также не нужны кавычки, а если и нужны, то они все равно будут удалены.
Я бы рекомендовал сделать это как можно проще
VITE_MY_VAR=Hello World
поэтому теоретически, если значение VITE_MY_VAR равно 'Hello World'. Затем, используя то, что вы упомянули выше, %VITE_MY_VAR% следует распечатать ожидаемое значение?
Вполне возможно, что я делаю что-то не так, но вот что выводится на консоль %VITE_MY_VAR%. Вот как я пишу лог console.info('my env var', %VITE_MY_VAR%);
У меня работает Vite ^ 4.4.5. Я добавил VITE_MY_VAR=Hello World к .env, добавил блок <script> к index.html, запустил yarn dev и открыл страницу localhost:5173. Убедитесь, что вы редактируете index.html, который находится в корне вашего проекта.
хм, я в деле "vite": "^3.1.6"
Vite v3 не имеет функции замены HTML. ему тоже почти 3 года
Мне интересно, будет ли реактивный шлем лучшей идеей, чем обновление vite
Вы не ответили на мой вопрос о том, зачем вам это вообще нужно. Честно говоря, для меня это не имеет смысла, когда вы можете просто использовать import.meta.env.VITE_MY_VAR в одном из ваших связанных файлов JS/компонентов React.
Я пытаюсь добавить фрагмент JavaScript, который позволит мне подключиться к SDK, но значения во фрагменте будут динамическими в зависимости от среды.
Обновление до 4.4.5 решило проблему, как описано.
Ах, это имеет больше смысла, чем console.info() :D
@Фил, извини, да. Я использую
VITE. Только что обновил теги