vite常量配置

July 16, 2023

环境变量

在由 vite 构建的 js 模块中，模块可由 vite 提供的 import.meta.env 伪对象（编译时替换）获取环境变量

默认情况下，vite 使用 dotenv 读取 .env 文件修改环境变量，并且只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码

注：此处不讨论如何修改模式，以加载不同的环境变量（参见文档即可）
要在配置文件中使用环境变量，则可以参见此处

vite 默认提供的环境变量有： MODE BASE_URL PROD DEV SSR

此外，vite 还支持在 html 文件中替换环境变量，例如：

html

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

常量替换

由于 vite 使用 esbuild，常量替换功能是通过 esbuild 实现

注： rollup 通过 @rollup/plugin-replace 实现
webpack 则是通过 DefinePlugin 实现
三者的行为差不多

这些常量：在开发环境下会被定义在全局，在构建时被静态替换
它是不经过任何语法分析，直接替换文本实现的
这也就是说，我们实际上应该配置一个 Record<string, string>，出现给定键就原样替换为给定字符串
不过实际配置类型是 Record<string, any>，可以看作是值经过了 String() 处理

vite.config.js

import { defineConfig, loadEnv } from "vite";

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

注意：开发环境下会被定义在 window，在构建时仅文本替换（不在 window 上！）

插件实现

vite 插件是扩展 rollup 插件实现的

插件是 nodejs 环境，因此也可以通过插件创建虚拟模块来向其它模块暴露代码

vite.config.js

import { defineConfig } from "vite";

export default defineConfig({
    plugins: [myPlugin()],
});

function myPlugin() {
    const virtualModuleId = "virtual:my-module";
    const resolvedVirtualModuleId = "\0" + virtualModuleId;

    return {
        name: "my-plugin", // 必须的，将会在 warning 和 error 中显示
        resolveId(id) {
            if (id === virtualModuleId) {
                return resolvedVirtualModuleId;
            }
        },
        load(id) {
            if (id === resolvedVirtualModuleId) {
                return `export const msg = "from virtual module"`;
            }
        },
    };
}

←Back to home