在 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>