6：Vite环境变量处理

环境变量

环境变量通常可以从 process.env 获得。

注意 Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子，root 和 envDir 选项会影响加载行为。不过当你的确需要时，你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。

import { defineConfig, loadEnv } from 'vite'
import viteBaseConfig from './vite.base.config'
import viteDevConfig from './vite.dev.config'
import viteProdConfig from './vite.prod.config'

const envResolver = {
    serve: () => {
        console.log('开发环境')
        return { ...viteBaseConfig, ...viteDevConfig }
    },
    build: () => ({ ...viteBaseConfig, ...viteProdConfig })
}

export default defineConfig(({ command, mode }) => {
    // 环境变量通常可以从 process.env 获得。
    // 注意 Vite 默认是不加载 .env 文件的，
    // 因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，
    // 举个例子，root 和 envDir 选项会影响加载行为。
    // 不过当你的确需要时，你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。
    console.log(process.env) // 这里拿不到环境变量

    console.log('mode -->', mode)

    // process.cwd() 当前node工作目录
    console.log('process.cwd -->', process.cwd())
    // 根据当前工作目录中的 `mode` 加载 .env 文件
    // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
    const env = loadEnv(mode, process.cwd(), '')
    console.log(env) // 这里就可以拿到 .env 的环境变量了

    return envResolver[command]()
})

mode

mode是根据当前的环境的值所定下来的，当我们在敲下 yarn dev 的时候，默认是执行了 yarn dev --mode development， --mode 代表参数，比如可以执行 yarn dev --mode -dev 则 mode 的值为 dev

这样可以根据 mode 的值开启测试环境等。

客户端读取环境变量

浏览器端是通过 import.meta.env 读取环境变量的

console.log(import.meta.env)

但是我们可以看到并没有我们想要的环境变量，这是由于vite做了拦截，对于非 VITE_ 开头的都读取不到，防止变量冲突。我们只需要给变量加上 VITE_ 开头就行了。

VITE_BASE=http

VITE_BASE_URL=http://dev.api
APP_KEY=100

可以看到已经读取成功了，这里需要补充一点，vite在读取的时候会合并 .env 和 根据环境例如 开发环境 会合并

.env.development 这两个。.env 相当于是base变量，类似以下伪代码。

const baseEnvConfig = 读取.env的配置
const modeEnvConfig = 读取env相关配置
const lastEnvConfig = { ...baseEnvConfig, ...modeEnvConfig }

如果我们想改这个 vite 前缀，可以通过 envPrefix 这个变量去设置。

import { defineConfig } from 'vite'

export default defineConfig({
    envPrefix: 'ENV_' // 配置VITE注入客户端变量的前缀
})

这样读取出来的环境变量就是以 ENV 开头的了。

补充：为什么vite.config.js可以书写成esmodule的形式, 这是因为vite他在读取这个vite.config.js的时候会率先node去解析文件语法, 如果发现你是esmodule规范会直接将你的esmodule规范进行替换变成commonjs规范