vite使用nacos配置.env部署的坑

87 阅读2分钟

背景

由于运维需要统一规范部署,希望所有项目的配置通过nacos线上是配置生成.env,并且构建命令统一使用vite build

对应的package.json


  "scripts": {
    "serve": "pnpm dev",
    "build": "vite build",
    ....
    }

当前的env项目结构

image.png

问题

  1. 实际在jenkins打包中。在nacos测试环境配置了测试环境的信息,在构建时总是读取正式环境的配置并且打包出来也是正式的包。

wechat_2025-08-12_173910_072.jpg

  1. 在构建的过程中也是提示 building for production... image.png

分析

  1. 无论是那个环境构建,执行vite build ,都等价于vite build --mode production
  2. 又因为.env是有覆盖的策略,如果同时存在nacos的.env和 项目中的.env.production , 则会加载完.env再用.env.production覆盖一遍。

所以无论是那个环境构建,都会提示building for production... ,因为都是已vite build --mode production 构建。由于覆盖的问题,所以打出来的包一直都是正式的包。

解决

删除多余.env.production ,由于读不到.env.production , 系统最后再加载.env 就是nacos上面配置的环境信息。

扩展

很多.env里面都有如下信息ENV=XXX,是否可以ENV='test'动态加载改变运行时的mode,从而读取不同的.env.test?

image.png

答:不行。

image.png

通过打印我们也能看到,无论怎么设置输出的mode还是production image.png

在vite构建的时候,mode已经是提前确定的了,上面的ENV即不会覆盖运行时的mode,也不能被vite直接访问,(VITE_APP_ENV则可以,因为是 VITE开头)

所以真的希望读取.env.test 还是得使用vite build --mode test命令指明构建的类型才行。

哪在node项目里面也能够覆盖环境变量吗?

答:也不行。

而且node一般以NODE_ENV约定俗成的变量,除非是自己用dotenv等库自己访问。