vue3加vite多环境配置

1.在根目录下新建两个文件

.env.development是开发环境
.env.production是生产环境
我自己的项目两个环境就足够了
2.定义环境变量

# 开发环境
NODE_ENV="development"
VITE_BASE_API="http://xxx:xxx"
VITE_BASE_WS="ws://xxx:xxx"

# 生产环境
NODE_ENV="production"
VITE_BASE_API="http://xxx:xxx"
VITE_BASE_WS="ws://xxx:xxx"

注意，变量名必须以VITE_开头，这是Vite默认的前缀。
3.package.json中配置启动脚本

"scripts": {
    "build": "vite build",
    "dev": "vite --mode development",// 取 .env.development文件中的配置
    "prod": "vite --mode production",
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production",
    "preview": "vite preview"
  },

打包命令：pnpm run build:dev，打包开发环境的代码，具体看你自己的命名
启动命令：pnpm run dev ，启动开发环境的代码

4.在 vite 中使用环境变量
首先引入import { defineConfig,loadEnv } from 'vite'
其次在打印看一下环境


5.在项目中使用import.meta.env.VITE_BASE_API获取环境变量，
在浏览器可以打印出来

参考了两位大佬的文章：添加链接描述
添加链接描述