企业官网建设流程全解析

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

主要有三个核心作用：

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

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

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

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

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

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

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

示例：.env.development文件内容

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

示例：.env.production文件内容

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

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

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

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

<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工具：

// vite.config.tsimport{defineConfig,loadEnv}from'vite'importvuefrom'@vitejs/plugin-vue'importvueDevToolsfrom'vite-plugin-vue-devtools'exportdefaultdefineConfig(({mode})=>{// 根据当前运行模式加载对应的 .env 文件constenv=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,}}}}})

⚠️ 核心注意事项

1. 修改后必须重启：每次修改.env文件后，必须手动停止（Ctrl+C）并重新运行npm run dev，否则修改不会生效。
2. 类型提示（TypeScript）：如果你使用 TS，为了让import.meta.env有智能提示，可以在env.d.ts中补充声明：

   /// <reference types="vite/client" />interfaceImportMetaEnv{readonlyVITE_API_BASE_URL:stringreadonlyVITE_APP_TITLE:string}interfaceImportMeta{readonlyenv:ImportMetaEnv}

3. .gitignore配置：请务必在.gitignore文件中添加.env.local、.env.*.local，防止本地敏感配置泄露。但.env.development和.env.production这类通用模板可以提交（视团队规范而定）。
4. 变量值无需引号：在.env文件中写VITE_NAME=张三即可，不要写成VITE_NAME="张三"，否则引号会被当成字符串的一部分。
5. 布尔值处理：import.meta.env读取的全是字符串。如果需要布尔类型，需手动判断，例如const isDev = import.meta.env.VITE_APP_ENV === 'development'。