Использование логических переменных .env с условием v-if
Я переношу старый проект vue2 на vue3. Я начал вит проект. В моем компоненте есть условие div v-if, которое ограничивает отображение некоторых кнопок на странице, если переменные env имеют значение true и false.
Это часть компонента.
<div v-if = "mePrivate == true && mePublic == false">
<v-chip class = "ma-2" color = "success" @click = "deposit(row.ticker, row.address)">
<v-icon left>mdi-server-plus</v-icon>Deposit
</v-chip>
<v-chip class = "ma-2" color = "red" dark @click = "showWithdrawOverlay(row.ticker)">
<v-icon left>mdi-server-plus</v-icon>Withdraw
</v-chip>
</div>
<div v-else>
Переменные mePrivate и mePublic объявлены ниже в разделе сценария, которые объявляются в файле .env.
export default {
components: { QrcodeVue },
props: [ 'wallets' ],
data: function() {
return {
mePrivate: process.env.ME_PRIVATE,
mePublic: process.env.ME_PUBLIC,
В моем файле .env у меня есть эти переменные env, объявленные правильно, соответствующие условию как истинные и ложные. Однако кнопки по-прежнему не отображаются
P.S. Я также пытался объявить true и false строками.
Ответы 2
Когда вы начали свой проект Vue3, вы использовали Vite или Vue CLI?
Если Vite вам нужно определить свои переменные env в файле vite.config.js следующим образом:
define: { 'process.env': {myPublic : true, myPrivate : false} },
и на вашей странице в скрипте определите переменные
const myPublic = process.env.myPublic
const myPrivate = process.env.myPrivate
затем используйте его в шаблоне
<template>
<div>
myPublic is: {{myPublic}}
myPrivate is: {{myPrivate}}
</div>
</template>
но если вы используете Vue CLI, я считаю, что вам следует установить пакет vue/cli-service
и редактировать package.json
"scripts": {
"build": "vue-cli-service build",
"serve": "vue-cli-service serve",
}
После этого этот код должен работать правильно
<script>
const myPublic = process.env.myPublic
const myPrivate = process.env.myPrivate
</script>
<template>
<div>
myPublic is: {{myPublic}}
myPrivate is: {{myPrivate}}
</div>
</template>
Я начал свой проект с Vite. Я определил следующее в конфигурации vite. define: { 'process.env': { VITE_VUE_APP_MMBOTURL: process.env.VITE_VUE_APP_MMBOTURL, VITE_VUE_APP_MENAME: process.env.VITE_VUE_APP_MENAME, VITE_VUE_APP_WEBHOST: process.env.VITE_VUE_APP_WEBHOST, VITE_VUE_APP_MMBOTHOST: process.env.VITE_VUE_APP_MMBOTHOST, VITE_VUE_APP_MMBOTPORT: process.env.VITE_VUE_APP_MMBOTPORT, VITE_VUE_APP_ME_PRIVATE: process.env.VITE_VUE_APP_ME_PRIVATE, VITE_VUE_APP_ME_PUBLIC: process.env.VITE_VUE_APP_ME_PUBLIC
У меня есть отдельный файл .env, в котором есть значения переменных
Этот ответ не соответствует документации Vite о том, как вообще использовать переменные env.
Во-первых, внимательно прочитайте документацию Vite, так как именно отсюда берется вся информация в моем ответе.
Самый простой случай — иметь файл .env в корневом каталоге вашего проекта (НЕ /src, хотя вы всегда можете настроить местоположение с помощью параметра конфигурации )
Затем для любой переменной env, которая должна быть доступна для кода на стороне клиента, добавьте к имени префикс «VITE_», например. VITE_ME_PRIVATE=true
Затем эту переменную env можно использовать в вашем коде как import.meta.env.VITE_ME_PRIVATE
Вот еще одно важное замечание, хотя и специфичное для вашего варианта использования: переменные среды могут быть только строками, а не логическими или другими типами. Если вам нужна логическая env, просто знайте, что что-то вроде VITE_ME_PRIVATE=false вернет строковое значение «false».
Простое сравнение равенства может сделать преобразование для вас:
data() {
return {
mePrivate: import.meta.env.VITE_ME_PRIVATE === 'true',
mePublic: import.meta.env.VITE_ME_PUBLIC === 'true',
}
}
Env находится в корне проекта, а префикс, конечно же, VITE_VUE. Спасибо за вашу помощь.
Будет ли это работать как
<div v-if:>?