在您正在为项目运行带有reactjs模板的vite应用程序并尝试从.env文件中获取环境变量的场景中。从 .env 获取环境变量的流行方法是使用 process.env.SOMETHING 作为变量:
SOMETHING=SECRETSAUCE
此时 vite.config.ts 看起来像:
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], })
但是在vite中获取变量并不能立即起作用,有很多方法可以解决这个问题。我尝试了其中的大部分,我觉得坚持简单直接的方式。
可能使用上面的定义和 process.env.* 的默认获取逻辑,你会得到错误 Uncaught ReferenceError: global is not Defined。
我在 stackoverflow 中找到了很多参考资料,但我很困惑。
错误的修复是在配置中定义全局,如下所示。
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], define: { global: {}, }, })
现在,这可能会导致另一个更常见的错误 Uncaught ReferenceError: process is not Defined。
同样,网络上有很多解决方案,有些已经过时了。我发现最相关且最容易实现的是从 vite 库导入 loadEnv 并构建自定义逻辑,如下所示。
import { defineConfig, loadEnv } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), ''); return { define: { global: {}, 'process.env': env }, plugins: [react()], } })
魔法立刻发生了!
还要提一下,我们不需要使用 dotenv 依赖项作为在带有 process.env.* 的代码中获取环境变量,没有它也可以很好地工作。
编码愉快!
免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。
Copyright© 2022 湘ICP备2022001581号-3