Vue3 —— 使用Vite配置环境变量
在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作为构建工具。
评论已关闭