vite配置-环境变量 - vite - 前端 - 技术设计

Vite 环境变量主要是为了区分开发、测试、生产等环境的变量
参考：
Vite 环境变量配置官方文档
vite环境变量

1.env配置文件

项目根目录新建 .env.development 、.env.production

以 VITE_ 为前缀定义变量

开发环境变量配置：.env.development

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
VITE_APP_TITLE = 'vue3-element-admin'
VITE_APP_PORT = 3000
VITE_APP_BASE_API = '/dev-api'

生产环境变量配置：.env.production

VITE_APP_TITLE = 'vue3-element-admin'
VITE_APP_PORT = 3000
VITE_APP_BASE_API = '/prod-api'

2.环境变量智能提示

新建 src/types/env.d.ts文件存放环境变量TS类型声明

// src/types/env.d.ts
interface ImportMetaEnv {
  /**
   * 应用标题
   */
  VITE_APP_TITLE: string;
  /**
   * 应用端口
   */
  VITE_APP_PORT: number;
  /**
   * API基础路径(反向代理)
   */
  VITE_APP_BASE_API: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

默认情况下，Vite 在 vite/client.d.ts 中为 import.meta.env 提供了类型定义。随着在 .env[mode] 文件中自定义了越来越多的环境变量，你可能想要在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示。要想做到这一点，你可以在 src 目录下创建一个 vite-env.d.ts 文件(vite项目初始化时默认创建了)，接着按下面这样增加 ImportMetaEnv 的定义：
/// <reference types="vite/client" />
interface ImportMetaEnv {
    readonly VITE_APP_TITLE: string; //网站标题
    readonly VITE_APP_BASE_API: string; //接口前缀
    readonly VITE_BASE_PATH: string; //打包路径
    readonly VITE_DROP_DEBUGGER: string; //是否删除debugger
    readonly VITE_DROP_CONSOLE: string; //是否删除console.log
    readonly VITE_SOURCEMAP: string; //是否sourcemap
    readonly VITE_OUT_DIR: string; //输出路径
    // 更多环境变量...
}

interface ImportMeta {
    readonly env: ImportMetaEnv;
}
对应.env.development和.env.production
# 环境
NODE_ENV=production

# 接口前缀
VITE_APP_BASE_API=dev

# 打包路径
VITE_BASE_PATH=/dist-dev/

# 是否删除debugger
VITE_DROP_DEBUGGER=false

# 是否删除console.log
VITE_DROP_CONSOLE=false

# 是否sourcemap
VITE_SOURCEMAP=true

# 输出路径
VITE_OUT_DIR=dist-dev

# 标题
VITE_APP_TITLE=ElementAdmin

使用自定义环境变量就会有智能提示，环境变量的读取和使用请看跨域处理中的 vite.config.ts的配置。

3.使用变量

import.meta.env.VITE_BASE_URL

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

使用 loadEnv 读取环境变量

import { defineConfig, loadEnv } from 'vite'

// 1.写法一
export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite 配置
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})

// or 2.写法2
export default ({ mode }) => {
  console.log('mode', loadEnv(mode, process.cwd()).VITE_BASE_URL);     //127.0.0.1:9000/api  
  return defineConfig({
      //...
  })
}

5.HTML 环境变量替换

<h1>Vite is running in %MODE%</h1>
<p>Using data from %VITE_API_URL%</p>

如果环境变量在 import.meta.env 中不存在，比如不存在的 %NON_EXISTENT%，则会将被忽略而不被替换
这与 JS 中的 import.meta.env.NON_EXISTENT 不同，JS 中会被替换为 undefined

6.配置多环境

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

"scripts": {
    "test":"vite --mode test", //新增
},

使用 yarn test 启动命令，读取.env 与 .env.test的内容

vite ts