生产环境配置调整
大家好,我们的微信小程序也通过了备案!
我的微信上也收到了备案通过的通知。
接下来,我们要发布一下小程序。在发布之前,我们需要先修改一下配置。
了解项目配置结构
我们先打开客户端的配置文件看一下。
在 client 目录下面有个 env 的文件夹,下面就是我们项目的配置文件。
配置文件说明
client/
└── env/
├── .env # 通用配置(所有环境)
├── .env.development # 开发环境配置
├── .env.production # 生产环境配置
└── .env.test # 测试环境配置.env - 通用配置
首先我们看一下这个 .env,这个文件是一个通用的配置。
理论上来讲,我们把所有的配置都写在这个配置文件下面也行。
但是实际上,一般我们的项目都会分为:
- 开发环境
- 生产环境
- 测试环境
一般通用的配置我们就写在这个 .env 中,然后不同环境特有的配置就放在下面的这几个配置中。
配置优先级
下面的这几个配置的优先级是高于这个 .env 的!
配置优先级示例
举个例子:
比如这个 .env 中有一个后台请求地址:
API_BASE_URL=http://localhost:3000然后我们的这个开发环境的配置中也有一个后台请求地址:
API_BASE_URL=https://xiaomiaojizhang.top/api我们在前面的课程中去测试的时候,这个域名已经生效了,在开发环境是生效的。
也就是说这个配置的优先级是高于 .env 的。
打包时使用的配置
我们的项目在打包之后,默认用的就是这个 .env 以及 .env.production 这两个配置。
所以我们要修改一下这两个配置!
修改 .env 配置
打开 .env 文件
我们先看一下 .env,从上往下看。
APP_TITLE - 项目名称
首先第一个是 APP_TITLE,也就是项目的名称,我们改一下:
APP_TITLE=小喵记账PORT - 端口配置
然后第二个配置是端口:
PORT=8080这个可以暂时不用改。
UNI_APP_ID - 应用ID
然后下面是 UNI_APP_ID:
UNI_APP_ID=__UNI__XXXXXX这个配置主要是用来打包安卓以及 iOS 端的 APP。
我们这里发布的是小程序,所以这个值暂时也不用修改。
WX_APPID - 微信小程序AppID(重要)
接下来是 WX_APPID,这个值是微信的 AppID。
重要配置
我们需要到微信公众平台中去获取!
获取微信小程序 AppID
打开浏览器搜索一下 “微信公众平台”,微信扫码登录。
打开之后,首页显示我们的小程序已经备案,并且下面显示了备案号。
我们点一下左侧的 “开发管理”。
这里可以看到小程序的 AppID,就是这个值。
复制一下,粘贴到这个地方:
WX_APPID=wxabcdef1234567890其他配置项
然后我们继续往下看:
H5 相关配置:
H5_TITLE=xxx我们也暂时不用管。
后台请求的地址:
API_BASE_URL=http://localhost:3000我们在各自的环境中去配置会把它覆盖掉,所以也不用管。
其他 H5 配置: 这两个也是 H5 相关的配置,也暂时先不修改。
第二个请求地址:
API_BASE_URL_2=xxx实际上并没有生效,我们现在只有一个地址,其实用的就是 API_BASE_URL,所以这个也暂时不用修改。
不确定配置项作用?
如果不确定的话,其实我们还可以在 AI 中问一下,我们可以问一下每个配置项它的作用。
然后下面的默认配置都暂时先不管。
主要修改项总结
主要就是这两个:
- ✅
APP_TITLE- 项目名称 - ✅
WX_APPID- 微信小程序 AppID
修改 .env.production 配置
修改完成之后,我们再来改一下 .env.production。
这个配置文件我们可以参考一下 .env.development,因为我们之前已经在开发环境测试过了。
打开 .env.production 文件
主要就是最后一个后台请求的地址,这个要修改一下。
修改 API 地址
开发环境配置(.env.development):
API_BASE_URL=https://xiaomiaojizhang.top:443/api复制一下,然后粘贴到生产环境配置中:
生产环境配置(.env.production):
API_BASE_URL=https://xiaomiaojizhang.top/api粘贴过来之后,我们可以把 :443 去掉。
其实不去掉也没有影响,都是一样的。
配置文件完整示例
.env (通用配置)
# 应用名称
APP_TITLE=小喵记账
# 开发服务器端口
PORT=8080
# uni-app 应用ID(用于打包APP)
UNI_APP_ID=__UNI__XXXXXX
# 微信小程序AppID
WX_APPID=wxabcdef1234567890
# H5配置
H5_TITLE=小喵记账
# 后台请求地址(会被环境配置覆盖)
API_BASE_URL=http://localhost:3000.env.development (开发环境)
# 后台请求地址
API_BASE_URL=https://xiaomiaojizhang.top/api.env.production (生产环境)
# 后台请求地址
API_BASE_URL=https://xiaomiaojizhang.top/api.env.test (测试环境)
# 后台请求地址
API_BASE_URL=https://test.xiaomiaojizhang.top/api环境配置优先级
.env.production (生产环境)
↓ 覆盖
.env (通用配置)
↓ 最终配置
生产环境最终配置配置加载顺序
- 首先加载
.env文件(通用配置) - 然后根据环境加载对应的环境配置文件
- 环境配置文件中的值会覆盖
.env中的同名配置
配置项说明表
| 配置项 | 说明 | 是否必填 | 示例值 |
|---|---|---|---|
APP_TITLE | 应用名称 | ✅ 是 | 小喵记账 |
PORT | 开发服务器端口 | ❌ 否 | 8080 |
UNI_APP_ID | uni-app应用ID | ❌ 否 | __UNI__XXXXXX |
WX_APPID | 微信小程序AppID | ✅ 是 | wxabcdef1234567890 |
API_BASE_URL | 后台API地址 | ✅ 是 | https://xxx.com/api |
H5_TITLE | H5页面标题 | ❌ 否 | 小喵记账 |
常见问题
1. 如何获取微信小程序 AppID?
- 登录微信公众平台
- 进入”开发管理”
- 在”开发设置”中查看 AppID
2. 配置修改后需要重启服务吗?
是的,修改配置文件后需要重新启动开发服务器。
3. 为什么有多个环境配置?
为了方便在不同环境(开发/测试/生产)使用不同的配置,如不同的 API 地址。
4. 端口号可以随便改吗?
可以,但需要确保端口未被占用,且在防火墙中开放。
5. API_BASE_URL 需要加 /api 后缀吗?
这取决于你的后端接口设计。如果所有接口都有 /api 前缀,则需要添加。
6. 配置文件中可以使用注释吗?
可以,使用 # 开头的行会被视为注释。
7. 打包小程序使用哪个配置?
使用 .env + .env.production 的配置。
8. 如何在代码中访问这些配置?
通常通过 process.env.配置项名称 访问,如:
const apiUrl = process.env.API_BASE_URL
const appId = process.env.WX_APPID配置检查清单
发布前配置检查
- APP_TITLE 已修改为正式名称
- WX_APPID 已填写正确的小程序 AppID
- .env.production 中的 API_BASE_URL 已配置为生产环境域名
- API 地址使用 HTTPS 协议
- 域名已完成备案
- SSL 证书已配置
- 所有配置项无语法错误
- 本地测试通过
配置最佳实践
1. 使用环境变量
不要在代码中硬编码配置,使用环境变量管理。
2. 敏感信息保护
不要将 AppID、密钥等敏感信息提交到公开仓库。
3. 配置文档化
为每个配置项添加注释说明其作用。
4. 环境隔离
确保不同环境的配置互不影响。
5. 默认值
为配置项提供合理的默认值,避免未配置时报错。
总结
生产环境配置的关键步骤:
- 了解项目配置文件结构(
.env系列) - 修改
.env中的 APP_TITLE(项目名称) - 从微信公众平台获取 AppID
- 将 AppID 配置到
.env的 WX_APPID - 修改
.env.production的 API_BASE_URL - 配置为生产环境的域名地址
- 检查所有配置项无误
- 准备发布小程序
配置完成!
现在生产环境配置已经准备好了,可以开始打包和发布小程序了! 🎉
下一步
配置完成后,我们就可以开始打包小程序,并上传到微信公众平台进行审核了!
遇到问题？
如果配置过程中遇到任何问题,可以下方微信扫码帮您看下(免费咨询)
