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

Question

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

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

试了一下官网这个

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

VITE_NODE_ENV = ft

build 打包后，DEV 仍然是 true

如果设置

NODE_ENV = production

开发阶段，DEV 变成了 false

有没有好的解决方案呢？

Answer 1

更新

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",

旧答案

加个配置文件，加个NODE_ENV=production就可以了
源码参考：Vite

Answer 2

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

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

---

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

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

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

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

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

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 3

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

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

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

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