Vue3 项目初始化(三) 环境变量

一:  默认变量

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

二: env多环境区分

Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量：

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

三: build打包多环境

vite build 默认加载 production

# live 环境
NODE_ENV = production

# 打包路径
VITE_PUBLIC_PATH = /
# 接口地址
VITE_GLOB_API_URL = /basic-api
VITE_GLOB_UPLOAD_URL = /upload

可以通过传递 --mode  加载.env.staging 文件

vite build --mode staging

# .env.staging
# staging 环境
NODE_ENV = production

# 打包路径
VITE_PUBLIC_PATH = /
# 接口地址
VITE_GLOB_API_URL = /basic-api
VITE_GLOB_UPLOAD_URL = /upload

注意:  如果使用了--mode去加载设置加载不同的文件, 如果不在build 的.env 不标明 NODE_ENV = production。那么其import.meta.env.PROD永远false。  

四: 自定义变量

自定义变量 必须要以VITE_开头, 在src目录env.d.ts，并添加对应的type

interface ImportMetaEnv {
  readonly VITE_GLOB_APP_TITLE: string
  readonly VITE_GLOB_API_URL: string
  readonly VITE_PUBLIC_PATH: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

// 在vue页面里使用
console.log('VITE_GLOB_APP_TITLE:' + import.meta.env.VITE_GLOB_APP_TITLE);
console.log('VITE_GLOB_API_URL:' + import.meta.env.VITE_GLOB_API_URL);

// 在vite.config.ts

import {ConfigEnv, UserConfig, loadEnv} from 'vite'

export default ({command, mode}: ConfigEnv): UserConfig => {
  /**
   * mode：模式
   * envDir：环境变量配置文件所在目录
   * prefix：接受的环境变量前缀，默认为 VITE_，这就应证了文档中提到的内容
   */
  const envConfig = loadEnv(mode, process.cwd());
  const VITE_GLOB_API_URL = String(envConfig.VITE_GLOB_API_URL);
  const VITE_PUBLIC_PATH = Number(envConfig.VITE_PUBLIC_PATH);
};

五: 环境取值

创建src/utils/env.ts

import type { ImportMetaEnv } from '#/global'

// 开发环境mode
export const devMode = 'dev'

// prod环境mode
export const prodMode = 'prod'

// 当前开发环境
export function getEnv(): string {
  return import.meta.env.MODE
}

// 是否是开发模式
export function isDevMode(): boolean {
  return import.meta.env.DEV
}

// 是否是生产模式
export function isProdMode(): boolean {
  return import.meta.env.PROD
}

六: 修改package.json

 "scripts": {
    "dev:uat": "vite --mode uat",
    "dev:prod": "vite --mode prod",
    "dev:live": "vite --mode live",
    "build": "run-p type-check \"build-only {@}\" --",
    "build:uat": "run-p type-check && vite build --mode uat",
    "build:prod": "run-p type-check && vite build --mode prod",
    "build:live": "run-p type-check && vite build --mode live",
    "preview": "vite preview",
    "test:unit": "vitest",
    "type-check": "vue-tsc --build --force",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },

六: 问题

        1. 字符串里面不能直接用import.meta.env.的方式使用，不然打包的时候会报错，可以用’import.meta\u200b.env.VITE_APP_TITLE’的方式使用，

        2. 

// 在tsconfig.json中添加"types": [ "vite/client" ]，用来提供import.meta.env 上 Vite 注入的环境变量的类型定义

"compilerOptions": { "types": [ "vite/client" ] }

参考链接: 环境变量和模式 | Vite 官方中文文档