在 Vue3 +Vite环境中使用.env 环境配置文件

1、安装 dotenv

npm install dotenv --save

2、项目根目录创建 .env相关环境配置文件

.env.development 开发环境配置文件

.env.production 生产环境配置文件

示例创建一个 .env.development 开发环境配置文件内容

这里要注意，环境配置变量名必须是要 VITE_ 开头的才会被扫描然后暴露出去，在 Vue2里面则是 VUE_开头

# 开发环境配置
ENV = 'development'

# api请求地址
VITE_APP_BASE_API = 'http://127.0.0.1:12581/luk'

3、在页面或者组件使用当前运行环境配置

在组件或者页面使用 import.meta.env 调用相关的配置环境变量

页面Demo

<template>

</template>
<script setup lang="ts">
import {  onActivated  } from "vue";
const baseApiUrl = import.meta.env.VITE_APP_BASE_API

onMounted(() => {
})
onActivated(() => {
	console.info('当前运行环境：', import.meta.env)
    console.info('API请求地址', baseApiUrl)
})

</script>