广州市官网网站建设公司网站建设网络营销

0.环境变量文件

API_URL=8888888
VITE_API_URL=9999999

1.定义环境变量

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

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

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

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()：当前项目根目录
• “” ：加载所有环境变量

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

define: {"import.meta.env.API_URL":define["import.meta.env.API_URL"]
}

2.读取环境变量

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

console.log(import.meta.env)