当前位置：首页 > article >正文

【前端】Vue3+Vite如何进行多环境配置呢

article 2025/2/7 19:54:41

在项目或产品的迭代过程中需要分不同的环境，那么使用vite+vue3开发时，该如何进行配置呢

1、添加配置文件 .env.xxx

.env.xxx 需要与src在同一级目录下

例如：

开发环境：
.env.development
开发环境：
.env.test
生产环境
.env.production

在这里插入图片描述

注意：如果.env.xxx 与src不在同一级目录下，放在了其它目录，需要在vite.config.ts文件中配置env文件所在的路径，配envDir的值即可。
例如：我放在了config目录下
在这里插入图片描述
则需要配置envDir

2、环境文件中的配置

需要以VITE_开头，因为项目只暴漏有VITE开头的配置项，所以只有以VITE_的配置才可以在项目中使用
例如
.env.development

VITE_BASE_API=/api
VITE_APP_NAME='demo'

在这里插入图片描述

3、项目中使用配置

例如我们要用VITE_APP_NAME，使用 import.meta.env.{变量的key}

const appName= import.meta.env.VITE_APP_NAME
console.log(appName)

5、打包命令中指定 mode 参数

在package.json文件中的scripts下原来的build命令后加 --mode {对应环境}

例如：

"build:development": "vue-tsc --noEmit && vite build --mode development",
"build:test": "vue-tsc --noEmit && vite build --mode test",
"build:production": "vue-tsc --noEmit && vite build --mode production",

在这里插入图片描述

6、可能遇到的问题

在build的时候有时可能会遇到环境设置的不生效，提示内容：
NODE_ENV=production is not supported in the .env file. Only NODE_ENV=development is supported to create a development build of your project.
If you need to set process.env.NODE_ENV, you can set it in the Vite config instead.
在这里插入图片描述
出现这个问题可能的原因是环境配置中出现了错误的配置，添加了NODE_ENV=production，去掉NODE_ENV=production这项配置即可。