Vue3 Vite项目中布尔型.env变量配合v-if使用异常

核心问题 #

1. Vite环境变量获取方式错误：Vue2（基于Webpack）用process.env读取环境变量，但Vite客户端环境必须用import.meta.env，且变量名必须以VITE_为前缀，否则不会被注入到客户端代码中。
2. 环境变量类型不匹配：.env文件里配置的true/false本质是字符串类型，直接和布尔值true/false比较会出现判断偏差（比如"true" == true虽能隐式转换，但严格场景下容易出错）。

解决步骤 #

1. 修正.env文件的变量命名 #

确保变量以VITE_开头，示例：

VITE_ME_PRIVATE=true
VITE_ME_PUBLIC=false

2. 组件中正确获取并转换变量类型 #

替换process.env为import.meta.env，同时将字符串转为布尔值：

export default {
  components: { QrcodeVue },
  props: [ 'wallets' ],
  data: function() {
    return {
      // 方式1：用JSON.parse转换字符串为布尔值
      mePrivate: JSON.parse(import.meta.env.VITE_ME_PRIVATE),
      mePublic: JSON.parse(import.meta.env.VITE_ME_PUBLIC),
      // 方式2：更稳妥的字符串判断（避免.env内容不规范）
      // mePrivate: import.meta.env.VITE_ME_PRIVATE === 'true',
      // mePublic: import.meta.env.VITE_ME_PUBLIC === 'true',
    }
  }
}

3. 优化模板中的条件判断 #

变量转为布尔类型后，可简化判断逻辑：

<div v-if="mePrivate && !mePublic">
  <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>
  <!-- 其他内容 -->
</div>

额外提示 #

• 修改.env文件后，需要重启Vite开发服务器才能生效。
• Vite中所有环境变量默认都是字符串类型，必须手动转换为需要的类型后再使用。

内容的提问来源于stack exchange，提问作者artistAhmed