vite+ts+vue3环境变量和模式配置

根据不同的模式，设置http接口请求地址的baseURL。根据我自己的理解记录一下，如有不正确的地方请指正。
先说一下配置的要求：
在开发环境（执行命令vite dev/serve）下，接口地址可以在测试服务器和正式服务器之间切换。
在生产环境（vite build）下，接口地址可以在测试服务器和正式服务器之间切换。

版本信息：
"vite": "^4.0.0",
"vue": "^3.2.45",
"typescript": "~4.7.4",

配置实现：

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:8391
VITE_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
  baseURL = import.meta.env.DEV ? 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.TypeScript的智能提示
在src目录下创建一个env.d.ts文件，接着按下面这样增加ImportMetaEnv的定义：

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  readonly VITE_BASE_API: string
  readonly VITE_DEV_SERVER: string
  readonly VITE_SERVER: string
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

5.使用

开发环境下使用正式服务器：
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.production
VITE_BASE_API = https://***.cn
MY_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,
    },
  }
})

问题：

在我另一个项目中：
"vite": "^3.2.4",
"vue": "^3.2.45",
"typescript": "~4.7.4",

用命令选项--mode配置模式，不仅会修改import.meta.env.MODE，还会修改 process.env.NODE_ENV。此时import.meta.env.DEV与process.env.NODE_ENV就不一致了。
因此在客户端代码中尽量用import.meta.env.DEV或import.meta.env.PROD来判断运行环境。