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配置来改变

修改vite.config.js

js 复制代码

import { defineConfig } from "vite";
export default defineConfig( {
  envDir:"env"
});

这样就可以在项目根目录下新建env文件夹，并将根目录下所有的.env文件都放进去