Vite官方中文文档-环境变量与模式

一、环境变量

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量

只有以 VITE_ 为前缀的变量才会暴露给经过 Vite 处理的代码

二、模式

        默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式

        若想在 vite build 时运行不同的模式来渲染不同的标题，可以通过传递 --mode 选项标志来覆盖命令使用的默认模式

# 在 stag 预发布模式下构建应用
vite build --mode stag

1、根目录下创建.env 文件​

Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

2、应用示例

示例一：当前为开发环境，想在开发环境中使用(生产环境也类似，只需要将dev改成prod即可)

首先，跟目录下创建.env.dev文件(dev为自定义的名称)

其次，在.env.dev文件中定义环境变量。注意变量名必须以VITE_开头，变量对应的值不需要加引号。

VITE_BASE_URL=/api  // 切记此处/api不需要加引号；变量名必须以VITE_开头
DB_PASSWORD=foobar //变量名未以VITE_开头，则不生效，获取不到值

然后，修改package.json文件中的dev，将dev对应的值后面加上--mode dev，如下图，表示告诉它执行npm dev这个命令的时候要找.env.dev文件

最后，在代码中获取VITE_BASE_URL环境变量

console.log(import.meta.env.VITE_BASE_URL)

示例二：当前为开发环境，想在开发环境中使用（不在package.json文件配置）

如果不配置package.json文件，需要将.env.dev文件名改成.env.development文件名，（development是官网定义的为开发环境，不是自定义的名称），然后package.json文件中dev对应的值后缀不用再加--mode dev

三、mock 使用

fast mock

四、打包的环境变量

"build": "tsc -b && vite build",
//也可以去掉
"build": "vite build",

tsc -b 打包的时候会校验语法，没用到的变量会报错，所以这里加了tsc -b，可以去掉这个命令，就不会校验语法了。

五、编译时环境

  • 注意
  1. 变量必须 VITE_ 开头
  2. .env.production .env.stag 需设置 NODE_ENV=production 指定为生产模式
  3. 项目配置调整
1. 编写 .env 文件
# 设置 NODE_ENV 环境模式
NODE_ENV = development

# 接口 API 地址
VITE_BASE_API = /api

# 上传 API
VITE_UPLOAD_API = http:127.0.0.1:2021

# CDN 地址
VITE_CDN = http://www.aliyun.com

# mock 开关
VITE_MOCK = true

# MOCK API
VITE_MOCK_API = https://www.fastmock.site/mock/32586dc72671b593544e5d191ada0b88/api
2. 文件修改配置项
  • request.ts
const instance = axios.create({
  baseURL: import.meta.env.VITE_BASE_PATH,
  timeout: 8000,
  timeoutErrorMessage: '请求超时，请稍后再试',
  withCredentials: true
});

instance.interceptors.request.use(
  config => {
    showLoading();
    const token = storage.get('token');
    if (token) {
      config.headers.Authorization = token;
    }

    if (import.meta.env.VITE_MOCK === 'true') {
      config.baseURL = import.meta.env.VITE_MOCK_API;
    } else {
      config.baseURL = import.meta.env.VITE_BASE_API;
    }
    return {
      ...config
    };
  },
  (error: AxiosError) => {
    return Promise.reject(error);
  }
);

8 运行时环境封装（推荐）

  • config > index.ts
/**
 * 环境配置封装
 */

const config = {
  dev: {
    baseApi: '/api',
    uploadApi: 'http://127.0.0.1:2021',
    cdn: 'http://xxx.aliyun.com',
    mock: true,
    mockApi: 'https://www.fastmock.site/mock/32586dc72671b593544e5d191ada0b88/api'
  },
  stg: {
    baseApi: '/api',
    uploadApi: 'http://api-driver-stg.marsview.cc',
    cdn: 'http://xxx.aliyun.com',
    mock: false,
    mockApi: 'https://www.fastmock.site/mock/32586dc72671b593544e5d191ada0b88/api'
  },
  prd: {
    baseApi: '/api',
    uploadApi: 'http://api-driver.marsview.cc',
    cdn: 'http://xxx.aliyun.com',
    mock: false,
    mockApi: 'https://www.fastmock.site/mock/32586dc72671b593544e5d191ada0b88/api'
  }
};

export default {
  env,
  ...config[env]
};
1. 方法一
  • config > index.ts
type Env = 'dev' | 'stg' | 'prd';

let env: Env = 'dev';
if (location.host.includes('127.0.0.1') || location.host.includes('localhost')) {
  env = 'dev';
} else if (location.host === 'api-driver-stg.marsview.cc') {
  env = 'stg';
} else {
  env = 'prd';
}
2. 方法二
  • config > index.ts
type Env = 'dev' | 'stg' | 'prd';
const env = document.documentElement.dataset.env as Env;
  • index.html
<html lang="en" data-env="stg"></html>
3. 文件修改配置项
  • request.ts
instance.interceptors.request.use(
  config => {
    showLoading();
    const token = storage.get('token');
    if (token) {
      config.headers.Authorization = token;
    }

    if (env.mock) {
      config.baseURL = env.mockApi;
    } else {
      config.baseURL = env.baseApi;
    }
    return {
      ...config
    };
  },
  (error: AxiosError) => {
    return Promise.reject(error);
  }
);
# 前端 # javascript
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

avatar 天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

avatar 天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

avatar 天工造物局