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

它经不起推敲的 2024-09-20 09:03:01 阅读 56

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

步骤:

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

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

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



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。