vite怎么判断当前环境是本地环境还是测试环境(两种常用方式)

发布时间：2024-10-15 15:21:03

297 阅读

0 评论

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

步骤：

创建环境文件：在项目根目录下创建环境文件，例如 .env.local 和 .env.test。设置环境变量：
在 .env.local 文件中设置环境变量：

VITE_APP_ENV=local

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

VITE_APP_ENV=test

在代码中使用环境变量：

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 配置环境变量，并判断当前运行环境：

步骤：

安装 cross-env：

npm install cross-env --save-dev

修改 package.json 中的脚本：

{  "scripts": {    "dev": "cross-env IS_LOCAL=true vite",    "test": "cross-env IS_LOCAL=false vite",    "build": "vite build"  }}

配置 vite.config.js：

import { defineConfig } from 'vite';export default defineConfig({  define: {    'import.meta.env.VITE_IS_LOCAL': JSON.stringify(process.env.IS_LOCAL)  }});

在代码中判断环境：

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');