vite环境变量与模式

197 阅读1分钟

一、背景:

接手项目技术栈为:vue3、vite、pinia、element plus;
区分环境:开发环境、测试环境、正式环境;

二、问题:

如果我们想要在本地启动正式环境项目、或者打包测试环境下的项目,该如何解决呢?
(1)首先,我们知道vite默认情况下:dev命令运行在development(开发)模式下;
    build命令运行在production(正式)模式下。
(2)因此,我们可以通过修改模式,进而控制项目在相应的环境下即可。

三、解决方案:

1)操作:在package.json中通过--mode替换默认模式:
  1.本地启动正式环境,"dev:pro": "vite serve --mode production";
  2.打包测试环境,"build:staging": "vite build --mode staging"2)原理:vite本身默认不加载.env文件的,是通过loadEnv(mode, process.cwd())加载.env文件的。
通过传入相应的mode模式,进而加载环境配置文件中的环境变量的。使用起来很方便,快速帮我们解决区分环境的问题!!!
总之,借助--mode区分环境,实质就是通过改变mode模式来控制项目在哪个环境下的。

四、补充:

1、环境配置文件存放位置变更,具体操作如下:

image.png