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

一拖再拖一拖再拖2024-06-10 16:05

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)