vite 环境变量

/ 0评 / 0

环境变量的作用

一个项目可能会有开发版本、上线版本、测试版本等等多个版本,不同的环境会有不同请求api接口,就需更改一些基本配置,基本路径,服务器代理这种都要更改一遍,这时候就显得很麻烦,所以就需要使用到环境变量

vite中的环境变量

vite无法直接读取到env文件,需要loadEnv方法主动读取。

将vite.config文件更改为函数模式,通过mode来判断当前环境.
loadEnv 会自动检测文件夹下的 <code>.env.development.local` `.env.development` `.env.production.local` `.env.production` `.env` `.env.local 文件

需要注意的是,变量的名称必须以VITE为开头,否则不会识别

vite.config.js文件 使用loadEnv加载环境变量

export default ({command, mode}) => {
    const envConfig = loadEnv(mode, './');
    let config = {}
    return defineConfig(config)
}

.env文件 变量名称必须以VITE开头

VITE_APP_API=http://localhost:8081
VITE_APP_Base=/

使用变量

import.meta.env.VITE_APP_API

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注