在 Vite 项目中,你可以通过环境变量来判断当前运行的环境是本地开发环境还是测试环境。Vite 默认提供了 import.meta.env.MODE 变量,它会根据你的 mode 来设置相应的环境值。

步骤:

  1. 创建环境文件:在项目根目录下创建环境文件,例如 .env.local 和 .env.test。
  2. 设置环境变量
    .env.local 文件中设置环境变量:
VITE_APP_ENV=local

.env.test 文件中设置环境变量:

VITE_APP_ENV=test
  1. 在代码中使用环境变量
if (import.meta.env.VITE_APP_ENV === 'local') {
  console.log('当前是本地环境');
  // 执行本地环境下的代码
} else if (import.meta.env.VITE_APP_ENV === 'test') {
  console.log('当前是测试环境');
  // 执行测试环境下的代码
}

使用 cross-env 可以很方便地在不同平台上设置环境变量。你可以按照以下步骤在 Vite 项目中使用 cross-env 配置环境变量,并判断当前运行环境:

步骤:

  1. 安装 cross-env
npm install cross-env --save-dev
  1. 修改 package.json 中的脚本
{
  "scripts": {
    "dev": "cross-env IS_LOCAL=true vite",
    "test": "cross-env IS_LOCAL=false vite",
    "build": "vite build"
  }
}
  1. 配置 vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    'import.meta.env.VITE_IS_LOCAL': JSON.stringify(process.env.IS_LOCAL)
  }
});
  1. 在代码中判断环境
import { createApp } from 'vue';
import App from './App.vue';

if (import.meta.env.VITE_IS_LOCAL === 'true') {
  console.log('当前是本地环境');
  // 这里可以添加本地环境的相关逻辑
} else {
  console.log('当前是测试环境');
  // 这里可以添加测试环境的相关逻辑
}

createApp(App).mount('#app');
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐