vite 如何区分开发环境与打包后的环境?

如题。
有没有什么变量可以区分打包前与打包后(yarn build之后)?目前是通过 host 区分的,感觉不太优雅

const isEnv = location.host.includes("localhost")

试了一下官网这个
image.png

这个变量好像完全取决于 mode 的名称,比如像这样设置后

VITE_NODE_ENV = ft

build 打包后,DEV 仍然是 true

image.png

如果设置

NODE_ENV = production

开发阶段,DEV 变成了 false

image.png

有没有好的解决方案呢?

回复
阅读 4.1k
3 个回答

更新

npm/pnpm 可以使用 process.env.npm_lifecycle_event 来判断

也可以在package.json 里手动传值
VITE_USER_NODE_ENV 是vite保留参数,可以覆盖node_env

"dev": "VITE_USER_NODE_ENV=development vite --mode staging",
"build": "VITE_USER_NODE_ENV=production vite build --mode staging",

旧答案

image.png
加个配置文件,加个NODE_ENV=production就可以了
源码参考:Vite

据我理解,build 和 dev 本身就不同。

强改的话vite build --mode staging 或者 vite dev --mode production


环境变量是可以基于文件自己配置的

https://vitejs.cn/guide/env-a...

通过不同的文件区分不同环境下的环境变量即可。

为了防止意外地将一些环境变量泄漏到客户端,只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

所以你可以自己增加更多的环境变量。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ,欢迎正在阅读的你也加入。
新手上路,请多包涵

见文档:https://cn.vitejs.dev/guide/e...

我跑了个 demo 测试了下,不指定 mode 时执行 build 默认就是 production 模式。

如果指定了 mode 但值不是 producton 的话,PROD 属性就是 false 了。因为 DEV 和 PROD 永远相反,所以 DEV 就是 true。

你只需要在执行 build 命令时不指定 mode 或指定为 producton 就行了。

推荐问题
宣传栏