依据不同的模式，设置http接口申请地址的baseURL。依据我本人的了解记录一下，如有不正确的中央请斧正。
先说一下配置的要求：
在开发环境（执行命令vite dev/serve）下，接口地址能够在测试服务器和正式服务器之间切换。
在生成环境（vite build）下，接口地址能够在测试服务器和正式服务器之间切换。

配置实现：

1. 在根目录下新建文件：
//.env.development

VITE_BASE_API = https://***-test.cn:8391

//.env.production

VITE_BASE_API = https://***.cn

//.env.staging

VITE_DEV_SERVER = https://***-test.cn:8391VITE_SERVER = https://***.cn

2.在申请封装文件request.ts中援用

let baseURL = ''if(import.meta.env.MODE === 'staging') { // 准备模式  baseURL = process.env.NODE_ENV === 'development' ? import.meta.env.VITE_SERVER : import.meta.env.VITE_DEV_SERVER} else { // development或production模式  baseURL = import.meta.env.VITE_BASE_API}

3.在package.json的scripts项增加以下命令

"scripts": {  "dev:staging": "vite dev --mode staging",  "build:staging": "run-p type-check build-only-staging",  "build-only-staging": "vite build --mode staging",｝

4.应用

开发环境下应用正式服务器：npm run dev:staging生成环境下应用测试服务器：npm run build:staging

环境和模式

参考：
https://cn.vitejs.dev/guide/e...
https://cn.vitejs.dev/config/...

默认状况下，执行命令vite dev/serve（开发环境），运行在development(开发)模式；执行命令vite build（生成环境）运行在production(生产)模式。
模式能够通过vite.config.ts中的mode选项配置。然而会把serve和build时的模式都笼罩掉。举荐通过命令行--mode选项来重写。

.env 文件

Vite应用dotenv从环境目录中的下列文件加载额定的环境变量：
环境目录：vite.config.ts的envDir选项可配置，默认root。

.env                # 所有状况下都会加载.env.local          # 所有状况下都会加载，但会被 git 疏忽.env.[mode]         # 只在指定模式下加载.env.[mode].local   # 只在指定模式下加载，但会被 git 疏忽

比方：当执行vite build时，它会主动加载我的项目根目录下的.env.production中可能存在的环境变量。

# .env.productionVITE_BASE_API = https://***.cnMY_TITLE = HELLO

在利用中，能够应用import.meta.env.VITE_BASE_API设置申请地址的baseURL。
vite通过对象import.meta.env裸露进去的变量，利用的.vue和.ts/js文件中都能够拜访到。然而只有以envPrefix结尾的环境变量会通过import.meta.env裸露在客户端源码中。
比方下面的MY_TITLE就不能通过import.meta.env.MY_TITLE拜访到。

envPrefix
vite.config.ts的配置选项，默认：VITE_

拓展变量
Vite应用dotenv-expand来间接拓展变量（扩大到process.env上）。
参考：https://github.com/motdotla/d...

环境变量

Vite在import.meta.env对象上裸露的在所有状况下都能够应用的内建变量：

import.meta.env.MODE: {string} 利用运行的模式。import.meta.env.BASE_URL: {string} 部署利用时的根本 URL。他由base 配置项决定。import.meta.env.PROD: {boolean} 利用是否运行在生产环境。import.meta.env.DEV: {boolean} 利用是否运行在开发环境 (永远与 import.meta.env.PROD相同)。import.meta.env.SSR: {boolean} 利用是否运行在 server 上。

import.meta.env.PROD和import.meta.env.DEV与process.env.NODE_ENV统一，与执行的命令无关。
import.meta.env.MODE与mode配置的运行模式统一。

在配置中应用环境变量

参考：https://cn.vitejs.dev/config/
配置文件vite.config.ts中，环境变量通常能够从 process.env 取得。
留神：Vite 默认是不加载 .env 文件的，因为这些文件须要在执行完 Vite 配置后能力确定加载哪一个，举个例子，root 和 envDir 选项会影响加载行为。不过当你确实须要时，你能够应用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。

import { defineConfig, loadEnv } from 'vite'export default defineConfig(({ command, mode }) => {  // 依据当前工作目录中的 `mode` 加载 .env 文件  // 设置第三个参数为 '' 来加载所有环境变量，而不论是否有 `VITE_` 前缀。  const env = loadEnv(mode, process.cwd(), '')  return {    // vite 配置    define: {      __APP_ENV__: env.APP_ENV,    },  }})