vue3+vite 配置和使用环境变量

今天梳理下手头接手的一个vue3官网项目，发现没有整环境变量，启动测试还得手动改服务地址，有点拉，就梳理了下，整理了下笔记。

在 Vue 3 和 Vite 中配置和使用环境变量相对简单，以下是基本步骤：

1. 创建环境变量文件： 在项目根目录下创建一个 .env 文件，并在其中定义你的环境变量。你可以创建多个环境变量文件，例如 .env.development、.env.production 等，每个文件可以定义不同的环境变量。
2. 配置 Vite： 在 Vite 项目中，可以直接在代码中使用 import.meta.env 来访问环境变量。Vite 默认会加载 .env 文件中的环境变量，你也可以通过配置文件指定其他文件。在 vite.config.js 中添加对环境变量文件的引用。

声明：一般是在根目录下创建.env.development和.env.production等

注意如果想被vite识别到 需要配置变量名为VITE_开头

.env.development

VITE_NODE_ENV=development
VITE_BASE_URL=http://localhost:8083
VITE_BASE_API_URL=http://localhost:8083/api

.env.production

VITE_NODE_ENV=production
VITE_BASE_URL=http://xxxxxx
VITE_BASE_API_URL=http://xxxxxx

使用场景

vite.config.js中使用

import { loadEnv } from 'vite'
const BASE_URL =loadEnv('', process.cwd()).VITE_APP_BASE_URL

封装的axios中使用

const baseUrl = import.meta.env.VITE_BASE_URL;

组件中使用：

<template>
  <div>{{ import.meta.env.VITE_BASE_URL }}</div>
</template>

注意事项：

• • 在生产环境中，Vite 会自动将以 VITE_ 开头的环境变量注入到代码中。这些环境变量在构建时会被静态地替换为其实际值，因此不会暴露到客户端代码中。
  • 在开发环境中，Vite 会在每次重新加载时动态地注入所有环境变量，以便可以在代码中实时访问它们。