全局变量注入方式

全局变量注入方式

Vite.js 提供了多种全局变量注入方式，方便在项目中共享配置、环境变量或自定义常量。这些变量可以在构建时或运行时被注入，适用于不同场景的需求。

环境变量注入

环境变量是最常见的全局变量类型，通常用于区分开发、测试和生产环境。Vite.js 使用 import.meta.env 对象暴露环境变量。

// 访问环境变量
console.log(import.meta.env.MODE); // 'development' 或 'production'
console.log(import.meta.env.VITE_API_URL); // 自定义变量

在项目根目录创建 .env 文件定义变量：

VITE_API_URL=https://api.example.com
VITE_DEBUG=true

变量命名必须以 VITE_ 开头才能在客户端代码中访问。服务端变量可直接使用 process.env：

// vite.config.js
export default defineConfig({
  plugins: [vue()],
  define: {
    __SERVER_VERSION__: JSON.stringify(process.env.npm_package_version)
  }
})

define 配置注入

通过 vite.config.js 的 define 选项可以注入编译时全局常量，这些常量会在构建时被替换：

// vite.config.js
export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify('1.0.0'),
    __BUILD_TIME__: JSON.stringify(new Date().toISOString())
  }
})

使用时直接作为全局变量引用：

console.log(__APP_VERSION__); // '1.0.0'
console.log(__BUILD_TIME__); // '2023-05-20T08:00:00.000Z'

CSS 预处理器变量注入

在样式文件中也可以使用注入的变量，通过 additionalData 选项实现：

// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$primary-color: #1890ff; $theme-name: "light";`
      }
    }
  }
})

在 SCSS 文件中直接使用这些变量：

.header {
  color: $primary-color;
  background: if($theme-name == "light", white, black);
}

模块全局注册

对于需要频繁导入的工具函数或组件，可以通过 vite-plugin-global 实现自动导入：

// vite.config.js
import global from 'vite-plugin-global';

export default defineConfig({
  plugins: [
    global({
      react: ['useState', 'useEffect'], // 自动导入 React 的 hooks
      lodash: ['debounce', 'throttle'], // 自动导入 lodash 方法
    })
  ]
})

配置后代码中可直接使用，无需手动导入：

const [count, setCount] = useState(0); // 无需 import { useState } from 'react'
const handleScroll = debounce(() => {}, 200); // 无需 import { debounce } from 'lodash'

自定义插件注入

通过编写 Vite 插件可以实现更灵活的全局变量注入：

// vite.config.js
export default defineConfig({
  plugins: [{
    name: 'inject-globals',
    config() {
      return {
        define: {
          __SUPPORT_LANGUAGES__: JSON.stringify(['zh', 'en', 'ja'])
        }
      }
    },
    transform(code, id) {
      if (id.endsWith('.vue')) {
        return code.replace('__USER_ROLES__', JSON.stringify(['admin', 'editor']))
      }
    }
  }]
})

客户端类型支持

为注入的全局变量添加 TypeScript 类型声明，创建 env.d.ts 文件：

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

interface ImportMetaEnv {
  readonly VITE_API_URL: string
  readonly VITE_DEBUG: boolean
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

declare const __APP_VERSION__: string;
declare const __BUILD_TIME__: string;

多环境差异化配置

结合环境变量和条件配置实现多环境差异化：

// vite.config.js
export default defineConfig(({ mode }) => {
  const isProduction = mode === 'production';
  
  return {
    define: {
      __IS_PRODUCTION__: isProduction,
      __FEATURE_FLAGS__: JSON.stringify({
        newDashboard: !isProduction,
        legacySupport: isProduction
      })
    }
  }
})

动态导入与全局变量

全局变量也可以用于动态导入逻辑：

const module = await import(
  __IS_PRODUCTION__ 
    ? './prodModule.js' 
    : './devModule.js'
);

安全注意事项

注入全局变量时需注意：

1. 避免注入敏感信息
2. 生产环境应禁用调试变量
3. 变量名使用全大写加下划线命名规范
4. 前端可访问的变量必须加 VITE_ 前缀

// 错误示例：敏感信息直接暴露
define: {
  __DB_PASSWORD__: JSON.stringify('123456') // 不安全！
}