vite获取所有环境变量(env)

0.环境变量文件

javascript 复制代码
API_URL=8888888
VITE_API_URL=9999999

1.定义环境变量


默认情况下,vite只获取以VITE_为前缀的环境变量。

为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

但如果你觉得你是进击的巨人,放荡不羁爱自由,可以参考如下方案直接获取所有环境变量。

javascript 复制代码
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  // 如果你用的ts,请使用 let define: { [key: string]: string } = {};
  let define = {};
  Object.keys(env).forEach(key => {
    define[`import.meta.env.${key}`] = JSON.stringify(env[key])
  })
  return {
    //.....
    define: {
      ...define
    }
  }
})
  • mode:测试环境/正式环境/自定义环境
  • process.cwd():当前项目根目录
  • "" :加载所有环境变量

同理,既然可以暴露全部,你也可以拆分部分环境变量暴露:

javascript 复制代码
define: {
  "import.meta.env.API_URL":define["import.meta.env.API_URL"]
}

2.读取环境变量


vite客户端获取变量的方法和其他构建工具有一定差异,使用 import.meta.env.XX获取。

javascript 复制代码
console.log(import.meta.env)
相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
热爱生活的猴子3 小时前
阿里云服务器正确配置 Docker 国内镜像的方法
服务器·阿里云·docker
祝余呀3 小时前
html初学者第一天
前端·html
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
计算机毕设定制辅导-无忧学长7 小时前
西门子 PLC 与 Modbus 集成:S7-1500 RTU/TCP 配置指南(一)
服务器·数据库·tcp/ip
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头8 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全9 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒