前言 ¶

本篇主要介绍多环境的配置、安装以及使用。

一般来从开发一个项目到上线分为： 开发->测试->生产

官方文档：vite多环境

配置文件 ¶

我们先看看架构中的配置文件

打包相关 ¶

• .env.build：生产环境的配置

• .env.build-test： 测试环境配置

运行相关 ¶

• .env.serve-dev：开发环境配置
• .env.serve-test：测试环境配置

如何使用 ¶

我们这边以.env.serve-dev为例，其他配置文件使用类似

我们先看下配置文件结构

//.env.serve-dev
#定义变量必须要以VITE_APP_开头
#用于区分环境的变量，如果是开发则配置为test
VITE_APP_ENV = 'dev'
#axios中baseUrl的地址
VITE_APP_BASE_URL = 'https://github.jzfai.top/micro-service-api'
#图片和oss配置
VITE_APP_IMAGE_URL = 'https://github.jzfai.top:8080'
#跨域相关配置
#VITE_APP_BASE_URL = '/api'
#vite.config.js里proxy配置的变量
#VITE_APP_PROXY_URL = 'https://github.jzfai.top/micro-service-api'

在package.json直接使用--mode进行指定

"scripts": {
"dev": "vite --mode serve-dev"
},

--mode serve-dev 读取文件 .env.serve-dev

如何读取变量 ¶

通过import.meta.env 进行读取，如

#读取.env.serve-dev里的VITE_APP_BASE_URL
import.meta.env.VITE_APP_BASE_URL

可以打印查看我们的环境变量

console.log(import.meta.env)

全局变量定义 ¶

vite.config.js中定义全局变量

define: {
    //define global var
    GLOBAL_STRING: JSON.stringify('i am global var from vite.config.js define'),
    GLOBAL_VAR: { test: 'i am global var from vite.config.js define' }
},

我们定义了 GLOBAL_STRING 和 GLOBAL_VAR 这两个变量，那么你可以在任意文件中使用

console.log(GLOBAL_STRING)

注：定义全局变量的值不能是对象或数组