vue中环境变量文件

1. 环境变量文件的作用是什么？

主要有三个核心作用：

环境隔离：区分开发（dev）、测试（test）和生产（prod）环境，让代码在不同环境下自动使用不同的配置（例如：开发环境调用测试接口，生产环境调用正式接口）。
保护敏感信息 ：将 API 密钥、后端接口地址等硬编码信息从代码中抽离出来，避免提交到 Git 仓库，降低泄露风险（注意：Vite 下只有编译时暴露的变量才能被前端访问）。
提升维护性：修改配置时无需改动业务代码，只需修改环境变量文件即可。

2. 文件中应定义哪些变量？（命名规则）

在 Vite 项目中，只有以 VITE_ 开头的变量才会被客户端（你的 Vue 组件和页面）正常读取。

变量名	作用说明	示例值
`VITE_API_BASE_URL`	后端接口的基础地址	`http://localhost:3000/api` (开发) `https://api.example.com` (生产)
`VITE_APP_TITLE`	页面标题或应用名称	`我的管理系统`
`VITE_APP_ENV`	当前运行环境标识	`development` / `production`
`VITE_UPLOAD_URL`	文件上传专用服务器地址	`https://upload.example.com`

特别注意 ：如果你在 vite.config.ts 中需要使用变量（而非前端页面），则不受 VITE_ 前缀限制，可以直接读取所有变量。

3. 如何创建文件并定义变量？

在项目根目录 （即 package.json 所在的目录）下创建以下文件：

.env：通用配置，无论什么环境都会加载（优先级最低）。
.env.development ：开发环境加载（执行 npm run dev 时生效）。
.env.production ：生产环境加载（执行 npm run build 时生效）。

示例：.env.development 文件内容

ini 复制代码

# 注意：不要加引号，变量值默认会被当作字符串
VITE_API_BASE_URL=http://localhost:8080
VITE_APP_TITLE=本地开发版
VITE_APP_ENV=development

示例：.env.production 文件内容

ini 复制代码

VITE_API_BASE_URL=https://api.yourcompany.com
VITE_APP_TITLE=正式上线版
VITE_APP_ENV=production

4. 如何在代码中调用这些变量？

A. 在 Vue 组件或 JavaScript/TypeScript 文件中（前端代码）

使用全局对象 import.meta.env 来访问：

vue 复制代码

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>接口地址：{{ apiUrl }}</p>
  </div>
</template>

<script setup>
// 直接通过 import.meta.env 读取
const title = import.meta.env.VITE_APP_TITLE
const apiUrl = import.meta.env.VITE_API_BASE_URL

// 实际请求示例：axios.get(`${apiUrl}/user/list`)
</script>

B. 在 `vite.config.ts` 配置文件中（Node.js 环境）

使用 Node 的 process.env 读取，但需要先加载环境文件。Vite 提供了 loadEnv 工具：

typescript 复制代码

// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig(({ mode }) => {
  // 根据当前运行模式加载对应的 .env 文件
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [
      vue(),
      vueDevTools(),
    ],
    // 例如：在配置中读取端口号（注意，这里不受 VITE_ 前缀限制）
    server: {
      port: parseInt(env.VITE_PORT) || 3000, 
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL, // 读取接口地址
          changeOrigin: true,
        }
      }
    }
  }
})

⚠️ 核心注意事项

修改后必须重启 ：每次修改 .env 文件后，必须手动停止（Ctrl+C）并重新运行 npm run dev，否则修改不会生效。

类型提示（TypeScript） ：如果你使用 TS，为了让 import.meta.env 有智能提示，可以在 env.d.ts 中补充声明：