vue3--vite环境变量的配置

在开发环境、测试环境、生产环境需要请求不同的接口，对应不同的数据。

因此，配置环境变量也尤为重要

第一：为项目根目录开发、测试、生成（也可以加入预发布）环境创建.env文件

.env.development
.env.production
.env.test

第二：配置数据

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_BASE_API = '/dev-api'

NODE_ENV = 'production'
VITE_APP_BASE_API = '/prod-api'

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_BASE_API = '/test-api'

第三：package.json中配置运行命令

 "scripts": {
    "dev": "vite --open",
    "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
  },

如下图所示：

在任何的js代码中可以使用import.meta.env来访问其中数据。