项目设置与环境变量
🎯 引言
学完这篇文章，你将学会查看和调整 Vercel 项目的构建设置（构建命令、输出目录等），并掌握环境变量的配置方法，让项目在预览环境和生产环境使用不同的配置。
🧱 项目的构建设置
导入项目时 Vercel 自动识别了框架并填好了构建配置，这些配置随时可以修改。打开项目 → Settings → General → Build & Development Settings，能看到四个关键选项：
| 选项 | 作用 | Vite 项目默认值 |
|---|---|---|
| Framework Preset | 框架预设 | Vite |
| Build Command | 构建命令 | npm run build |
| Output Directory | 产物输出目录 | dist |
| Install Command | 安装依赖命令 | npm install |
什么时候需要手动改？举个常见例子：你自定义了构建脚本 npm run build:prod，那就把 Build Command 改成它，保存后下次部署时生效。
🧱 为什么需要环境变量
假设项目里要请求后端接口，本地开发和线上环境的接口地址不一样：
- 本地：
http://localhost:3000/api - 线上：
https://api.example.com
直接把地址写死在代码里，切换环境时就得改代码、重新提交，非常麻烦。环境变量就是来解决这个问题的：把"会变的值"抽出来，由部署平台在构建时注入。
Vite 项目读取环境变量的方式是 import.meta.env.变量名（Stage4 Vite 课程已学过），变量名必须以 VITE_ 开头：
<script setup>
const apiUrl = import.meta.env.VITE_API_URL;
console.log('当前接口地址：', apiUrl);
</script>
🛠 在 Vercel 配置环境变量
打开项目 → Settings → Environment Variables，添加一个变量：
- Name：
VITE_API_URL - Value：
https://api.example.com - Environments：勾选
Production（生产环境）
保存后回到 Deployments，对最新部署点击 Redeploy（或本地再 push 一次），变量才会被注入到新的构建中。
🌍 三种部署环境
添加变量时你会看到三个环境选项，它们对应不同的部署场景：
| 环境 | 什么时候生效 |
|---|---|
| Production | 生产部署（main 分支、vercel --prod） |
| Preview | 预览部署（其他分支、PR、vercel） |
| Development | 本地开发（vercel dev，最后一篇会用到） |
同一个变量名，可以给不同环境设置不同的值。比如 VITE_API_URL 在 Production 填正式接口地址，在 Preview 填测试接口地址，这样预览环境自动连测试服，互不干扰。
🧾 小节总结
- 构建设置在 Settings → Build & Development Settings，Vite 项目一般保持默认即可。
- 环境变量用来存放"随环境变化的值"，如接口地址。
- Vite 项目通过
import.meta.env.VITE_XXX读取，变量名必须以VITE_开头。 - 环境变量分为 Production、Preview、Development 三种生效范围。
- 修改环境变量后必须重新部署才会生效。
❓ 知识问答
Q1：把密钥（Secret Key）放进 VITE_ 变量安全吗？
A：不安全！以 VITE_ 开头的变量会被打包进前端代码，任何人都能在浏览器里看到。后端密钥绝对不能放进来，正确的做法是写在 Serverless Function 里（第七篇会讲）。
Q2：改了环境变量，为什么线上没变化？
A：两个常见原因：一是没有重新部署；二是变量名忘了加 VITE_ 前缀，Vite 不会把它注入前端代码。
Q3：本地 .env 文件和 Vercel 的环境变量是什么关系？
A：互不影响。.env 只在本地开发时生效；部署到 Vercel 后，读取的是控制台里配置的变量。两套值要分别维护。
Q4：Preview 环境没配某个变量会怎样？
A：该环境下这个变量就是 undefined。如果预览部署也需要用到它，记得给 Preview 也勾选并赋值。
🧪 小练习
- 在 Vercel 控制台添加环境变量
VITE_APP_AUTHOR，Production 环境值为你的名字。 - 在
App.vue中用import.meta.env.VITE_APP_AUTHOR读取并显示在页面上。 - 重新部署，确认线上页面正确显示。
<script setup>
// 请在这里编写代码
</script>
🎉 恭喜你已经掌握了项目设置与环境变量！下一篇我们学习预览部署和版本回滚，让上线更安心。