vue3+vite项目在html中输出环境变量
在Vue 3 + Vite项目中，你可以通过import.meta.env对象来访问环境变量。环境变量通常定义在.env文件中，并且可以有多个文件，比如.env.local、.env.development.local等。
首先，在项目根目录下创建.env文件，并添加你的环境变量：
# .env
VUE_APP_API_URL=https://api.example.com然后，在Vue组件中，你可以使用import.meta.env来访问这些变量：
<template>
<div>
API URL: {{ apiUrl }}
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const apiUrl = ref(import.meta.env.VUE_APP_API_URL);
onMounted(() => {
console.log(apiUrl.value); // 将会输出 "https://api.example.com"
});
</script>请确保你的环境变量名以VUE_APP_开头，这是Vite默认识别的环境变量前缀。在你的Vite配置或者Vue项目中，这个前缀是可以更改的，但是出于简洁性和常规使用情况，推荐使用默认的VUE_APP_前缀。
评论已关闭