环境变量和模式

环境变量：项目中根据不同的变量来执行不同得逻辑或者加载不同的资源变量根据环境的变化而被静态替换
模式：项目的运行方式(或者说启动方式)，或者说所执行的操作------>目前是这么理解的

vite环境变量和模式

vue cli 环境变量和模式

1.vite中的环境变量

目前的了解，Vite和Vue Cli 都是通过 dotenv 这个库来读取项目中的环境变量文件（.env文件），

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 上。

Vue Cli中将环境变量注入到了process.env（当前项目运行的环境相关的对象，有很多属性）对象上，直接使用process.env[变量名]访问

2.env文件

上面提到的dotenv库加载的就是项目中的env文件, 在env文件中声明项目所需的额外环境变量

javascript

.env                # 所有情况下都会加载   优先级最低 可以放一些项目不变但是个环境都会用到的东西 如项目title前缀等

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

问题：

我做单点登录时用到的： .env.development.local

不同的环境通过iframe和postMessage跨域传递token

# 数据分析 .env.development
VUE_APP_DA_URL = 'http://localhost:9527'


# 数据分析 .env.production
VUE_APP_DA_URL = 'http://192.168.255.156:9018'

当时的环境：.env.development为`development`环境以为线上的dev环境也为`development`,可到线上才发现为`production` 但是如果线上dev环境也为`development` 此时这个环境变量就错了

线上的开发环境地址当时为：http://192.168.255.156:9018 ，如果项目的线上dev环境模式也为`development` 那么这个地址会有错误因为读取的还是本地的localhost

此时需要一个只在本地跑项目的时候需要但是不管哪个线上环境都不需要的地址

解决：

javascript

# 数据分析 .env.development.local  将这个放在只在本地生效的env文件

VUE_APP_DA_URL = 'http://localhost:9527'

vite加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端，只有以 **VITE_ **为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量：

VITE_ZKP = 666

vue cli中以VUE_APP 开头，在vite中想配置指定的前缀可配置envprefix选项，不过一般会使用默认的VITE_

配置环境变量Typescript只能提示：

typescript

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

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

interface ImportMeta {
  readonly env: ImportMetaEnv
}

在vite.config.ts配置文件中拿到环境变量：

vite提供了loadEnv()方法来获取系统环境变量

typescript

// loadEnv类型签名

function loadEnv(
  mode: string,
  envDir: string,
  prefixes: string | string[] = 'VITE_',
): Record<string, string>

使用

typescript

export default ({ command, mode }: ConfigEnv): UserConfig => {
// process.cwd()   node api    此方法返回一个字符串，该字符串指定node.js进程的当前工作目录。
//  保证文件在不同的目录下执行时，路径始终不变

  const env = loadEnv(process.cwd(), mode)
  return {
    // 更多配置
  }
}

3. 模式（mode)

默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令则运行在 production (生产) 模式。

这意味着当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量：

在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如，如果你想在 staging （预发布）模式下构建应用：

javascript

// 执行build的时候 使用.env.staging中的变量环境
vite build --mode staging

mode去哪了：

在package.json的脚本中的mode会传递给配置文件 vite.config.ts中的配置函数参数：

export default defineConfig({ command, mode }: ConfigEnv): UserConfig => {

// defineConfig 的mode参数就是配置文件中指定的 没有自定义指定的话接收到的就是：开发环境：development     生产：production

  const env = loadEnv(process.cwd(), mode)
  return {
    // 更多配置
  }
}

环境变量和模式 ​

1.vite中的环境变量 ​

2.env文件 ​

3. 模式（mode) ​

环境变量和模式

1.vite中的环境变量

2.env文件

3. 模式（mode)