uniapp中import.meta.env的使用方法是什么？

在uniapp中如何使用import.meta.env？具体有哪些属性和方法可以调用？在不同环境下（如开发、生产）这个对象的值会有什么变化？使用时需要注意哪些兼容性问题？

2 回复

在uniapp中，import.meta.env用于获取环境变量。在vite项目中，可通过.env文件定义变量，如VITE_API_URL，然后使用import.meta.env.VITE_API_URL访问。注意：变量名必须以VITE_开头。


在 UniApp 中，import.meta.env 是用于访问环境变量的对象，常用于获取构建时的配置信息（如开发/生产环境标识、API 地址等）。以下是具体使用方法：

  1. 基本用法：
    在代码中直接通过 import.meta.env 访问环境变量：

    // 示例：获取当前环境模式
const mode = import.meta.env.MODE; // 输出 'development' 或 'production'
console.log('当前环境:', mode);

  2. 常用环境变量：

    • MODE: 当前环境（如 development、production）。
    • VITE_*: 以 VITE_ 开头的自定义变量（需在 .env 文件中配置）。

  3. 配置环境变量：
    在项目根目录创建 .env 文件（如 .env.development），定义变量：

    # .env.development
VITE_API_BASE_URL = https://dev-api.example.com

    在代码中使用：

    const apiUrl = import.meta.env.VITE_API_BASE_URL;

  4. 注意事项：

    • 仅支持 Vite 构建的项目（如使用 vue3 + vite 模板）。
    • 传统 vue-cli 项目需改用 process.env。
    • 变量名必须以 VITE_ 开头才能在客户端代码中访问。

示例场景：
根据环境动态配置 API 地址：

const baseURL = import.meta.env.MODE === 'development' 
  ? import.meta.env.VITE_DEV_API 
  : import.meta.env.VITE_PROD_API;

通过以上方法，可以灵活管理不同环境的配置。

回到顶部