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文件都放进去
相关推荐
二个半engineer2 分钟前
微前端中iframe集成方式与使用微前端框架方式对比
前端·前端框架
小菜全13 分钟前
《WebAssembly:前端开发的新可能》
前端·javascript
余防18 分钟前
CSRF跨站请求伪造
前端·安全·web安全·csrf
兮山与22 分钟前
前端2.0
前端
南风木兮丶29 分钟前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
万少42 分钟前
记 HarmonyOS 开发中的一个小事件 怒提华为工单
前端·harmonyos
未来之窗软件服务44 分钟前
万象EXCEL开发(六)excel单元格运算逻辑 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
Mintopia1 小时前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia1 小时前
🌩️ 云边协同架构下的 WebAI 动态资源调度技术
前端·javascript·aigc
Olrookie1 小时前
若依前后端分离版学习笔记(十六)——scoped、路由跳转
前端·笔记