在Vue 3项目中使用Vite配置环境变量，你可以通过Vite的配置文件vite.config.js或vite.config.ts来设置环境变量。
以下是一个配置环境变量的例子：
首先，在项目根目录下创建一个.env文件，用于定义公共环境变量：
# .env
VITE_APP_TITLE=My Vue App然后，创建一个.env.local文件来定义本地特有的环境变量：
# .env.local
VITE_APP_API_URL=http://localhost:3000接下来，在vite.config.js或vite.config.ts中，你可以通过import.meta.env来访问这些环境变量：
// vite.config.js 或 vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig(({ mode }) => {
// 根据模式不同加载不同的配置
const env = loadEnv(mode, process.cwd());
return {
// 其他配置...
define: {
'process.env': env
}
};
});
// 加载环境变量
function loadEnv(mode, basePath) {
const envPath = basePath + '/.env';
const localEnvPath = basePath + `/env/env.${mode}.local`;
const env = loadEnvFile(envPath) || {};
const localEnv = loadEnvFile(localEnvPath) || {};
return { ...env, ...localEnv };
}
// 加载.env文件
function loadEnvFile(path) {
if (!fs.existsSync(path)) {
return;
}
const env = parse(fs.readFileSync(path, 'utf-8'));
return env;
}在你的Vue组件中，你可以这样使用环境变量：
<script setup>
import { computed } from 'vue';
const appTitle = computed(() => import.meta.env.VITE_APP_TITLE);
const appApiUrl = computed(() => import.meta.env.VITE_APP_API_URL);
</script>
<template>
<div>
<h1>{{ appTitle }}</h1>
<p>API URL: {{ appApiUrl }}</p>
</div>
</template>请确保你的项目中已经安装了Vite，并且在package.json中指定了Vite作为构建工具。