Vue3+Vite+JS 配置环境变量

前提条件：不同环境下部分API请求需要拼接不同的baseURL

1、使用 loadEnv 配置，在 vite.config.js 中全局注入环境变量

import { defineConfig, loadEnv } from 'vite' // 引入loadEnv
import vue from '@vitejs/plugin-vue'
import { compression } from 'vite-plugin-compression2'
import { resolve } from 'path'
 
export default defineConfig(({ mode }) => {
  // 读取 .env 文件和 process.env
  const env = loadEnv(mode, process.cwd())
  const saasEnv = env.VITE_SAAS_ENV || process.env.VITE_SAAS_ENV || 'dev'
  
  return {
    // ...其他配置
    define: {
      __VITE_SAAS_ENV__: JSON.stringify(saasEnv)
    }
  }
})

2、在 src/api/request.js 中使用环境变量

// ... 其他配置

/* global __VITE_SAAS_ENV__ */

const service = axios.create({ timeout: 60000 })

// 设置不同环境时lambda基地址
const lambdaBaseUrlList = [
  { url: 'https://...', env: 'qa' },
  { url: 'https://...', env: 'dev' },
  { url: 'https://...', env: 'prod' }
]

function getLambdaBaseUrl() {
  // 通过 define 注入的全局变量`
  const saasEnv = typeof __VITE_SAAS_ENV__ !== 'undefined' ? __VITE_SAAS_ENV__ : 'dev'
  return lambdaBaseUrlList.find((v) => v.env === saasEnv)?.url || 'https://...'
}

service.interceptors.request.use(
  (config) => {
    // ... 其他配置
    if ( [...].includes(config.url)) {
      config.url = getLambdaBaseUrl() + config.url // 使用lambda
    }
    // ... 其他配置
    return config
  },

  (error) => {
    return Promise.reject(error)
  }

)

// ... 其他配置

export default service

3、本地运行或者打包时就可以通过命令来实现编译不同环境变量的包

// 本地开发
VITE_SAAS_ENV=qa yarn dev
VITE_SAAS_ENV=dev yarn dev
VITE_SAAS_ENV=prod yarn dev
// 不带环境变量命令则会编译默认的dev包
yarn dev

// 打包编译
VITE_SAAS_ENV=qa yarn build
VITE_SAAS_ENV=dev yarn build
VITE_SAAS_ENV=prod yarn build
// 不带环境变量命令则会编译默认的dev包
yarn build

总结

1. 动态环境变量加载

   • 使用 loadEnv(mode, process.cwd()) 加载当前模式（dev/prod/test）对应的 .env 文件变量，并支持 process.env 系统变量。
   • VITE_SAAS_ENV 采用优先级读取（.env > process.env），默认回退到 'dev'。

2. 全局常量注入

   • 通过 define 将 saasEnv 以 __VITE_SAAS_ENV__ 形式注入代码，编译时替换为实际值，避免运行时暴露敏感信息。

3. 多环境适配

   • 结合 mode 参数和不同 .env.[mode] 文件，实现开发、测试、生产环境的配置隔离。

4. 安全性与兼容性

   • 仅 VITE_ 前缀变量会被客户端访问，确保敏感数据（如 API 密钥）不会意外泄露。

核心作用：通过环境变量动态控制构建行为，适配不同部署场景（如 SaaS 多租户环境）。