Vite 环境变量配置

基础

1. 什么是环境变量

根据当前代码的环境变化而变化的变量叫做环境变量。比如VITE_BASE_URL代表请求接口的URL,在开发环境下为//127.0.0.1:3000/api,在生产环境下为//www.test.com/api

2. Vite有哪些自带环境变量?

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。共有五种内建变量:

  • import.meta.env.MODE: {string} 应用运行的模式。
  • import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
  • import.meta.env.PROD: {boolean} 应用是否运行在生产环境
  • import.meta.env.DEV: {boolean} 应用是否运行在开发环境
  • import.meta.env.SSR: {boolean} 应用是否运行在 server 上

3. Vite默认有哪些环境?

Vite默认只有两种环境,分别是开发环境development,生产环境production

4. 在哪里定义环境变量?

在项目根目录中分别新建:

.env:所有环境生效

.env.local:所有环境生效,但会被 git 忽略(适合保存敏感信息)

.env.development:开发环境生效

.env.production:生产环境生效

优先级:.env.development || .env.production > .env.local > .env

即如果在.env和.env.development中分别定义了VITE_BASE_URL变量,那么定义在.env中的VITE_BASE_URL将会生效

基本使用

1. 定义变量

VITE_ 为前缀定义变量

js 复制代码
VITE_BASE_URL = '//127.0.0.1:3000/api'

2. 定义变量ts类型

修改vite-env.d.ts

js 复制代码
/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_BASE_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

3. 在项目中使用变量

js 复制代码
// 获取环境变量
import.meta.env.VITE_BASE_URL

4. 在vite.config.ts中使用环境变量

使用 loadEnv 读取环境变量

js 复制代码
import { defineConfig, loadEnv } from 'vite';
//...

export default ({ mode }) => {
  const root = process.cwd();
  // 加载相应模式的环境变量
  const env = loadEnv(mode, root);
  console.log('env', env.VITE_BASE_URL); //127.0.0.1:3000/api  
  return defineConfig({
      //...
  });
};

进阶使用

1. 配置多环境

vite默认只有开发环境与生产环境,对于实际开发来说,显然是不够的,比如还需要测试环境test。

修改package.json

js 复制代码
  "scripts": {
    "test":"vite --mode test", // 新增
  },

2. 更改 .env默认地址

我们现在的.env文件都是建立在根目录,如果.env.XX文件太多,会显得项目根目录很乱。可以通过envDir配置来改变

  1. 修改vite.config.js
js 复制代码
import { defineConfig } from "vite";
export default defineConfig( {
  envDir:"env"
});
  1. 这样就可以在项目根目录下新建env文件夹,并将根目录下所有的.env文件都放进去
相关推荐
蔗理苦1 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro2 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹2 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风2 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱2 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年2 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵2 小时前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_2 小时前
分片上传-
前端·javascript·状态模式
东北南西2 小时前
手写React状态hook
前端·javascript·react.js
诗书画唱2 小时前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript