vite: 环境变量

vite中关于环境变量

解决方案

我想在 vite 环境里使用 process.env，这个是此寻找方案的出发点(方便与webpack方案统一)。

• vite-plugin-environment: https://github.com/ElMassimo/vite-plugin-environment
• 项目参考: https://github.com/aric-tpls/vite-runtime-envs

不足之处

可以自己重写此插件实现这个目标。

1. get 还没有添加 types，最好是自动生成
2. mode 应该添加到 env 中去，因为有时候需要知道当前的MODE (predefined vars: 一些预定义的变量)

安装

# add vite-plugin
yarn add --dev vite-plugin-environment
# add vite-envs
yarn add @jswork/vite-envs

配置

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import EnvironmentPlugin from 'vite-plugin-environment';

// https://vitejs.dev/config/
export default defineConfig({
  envDir: 'config/environments',
  plugins: [react(), EnvironmentPlugin('all', { prefix: 'VITE_' })]
});

App.js

import '@jswork/next';
import ViteEnvs from '@jswork/vite-envs';

nx.mix(nx, { $env: ViteEnvs.get });

config/environments

./config
└── environments
    ├── .env.beta.production
    ├── .env.local
    └── .env.production

参考

• https://github.com/gapkukb/vite-plugin-env-dts
• https://vitejs.dev/guide/env-and-mode.html
• https://blog.rxliuli.com/p/ab597b1e0d9840caaf51a8d24bc2c38c/
• https://www.cnblogs.com/ltfxy/p/16345282.html
• https://blog.csdn.net/weixin_51491855/article/details/131656490
• https://juejin.cn/post/7015404122799079437
• https://github.com/runtime-env/import-meta-env
• https://github.com/nichita-pasecinic/vite-runtime-envs
• https://github.com/IndexXuan/vite-plugin-env-compatible