vite: env 实现封装过程中遇到的问题

记录一下自己在封装 vite env 过程中遇到的一些问题

背景

我在公司项目中都实现了 nx.$env 用于环境变量的管理，但在 vite 中出现了一点小问题。

具体

dev 开发环境一切正常
prod: 环境发现取得值是不存在的

原来的 vite-plugin-env

这种实现的结论是将 process.env 里生成不同的变量，但原来我们是动态的取 process.env 里的值。
但实际在 vite 编译过程中 process.env.VITE_FRONTEND_URL 会编译成具体的值，所以，如果是通过 nx.$env 动态取，就取不到对应的值的。

export default function EnvironmentPlugin(options: EnvOptions = {}): Plugin {
  const { prefix = 'VITE_' } = options;
  return {
    name: 'vite-plugin-environment',
    config({ root = process.cwd(), envDir }, { mode }) {
      for (const key in env) {
        const value = env[key];
        const processKey = `process.env.${key}`;
        processVars[processKey] = JSON.stringify(value);
      }
      return { define: processVars };
    },
  };
}

新的的实现 vite-plugin-env

新的实现是将 process.env 作为一个整体，动态取的时候，先将这个 env 改成 obj 来用即可。

export default function EnvironmentPlugin(options: EnvOptions = {}): Plugin {
  const { prefix = 'VITE_' } = options;
  return {
    name: 'vite-plugin-environment',
    config({ root = process.cwd(), envDir }, { mode }) {
      return {
        define: {
          'process.env': JSON.stringify(env),
        },
      };
    },
  };
}

背景

具体

原来的 vite-plugin-env

新的的实现 vite-plugin-env

参考