关于typescript:vitetsvue3环境变量和模式配置

32次阅读

共计 2546 个字符，预计需要花费 7 分钟才能阅读完成。

依据不同的模式，设置 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: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
} 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 选项来重写。

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,},
  }
})

正文完