微信小程序运行/打包

微信小程序运行与发布教程

  • 适用于 Vue3 版 UniApp。
  • 本教程用于指导如何将项目打包并在微信开发者工具中运行或发布。

一、打包前准备

打包前先登录私服仓库下载代码。

1. 配置项目中的参数

修改根目录下 env/.env 文件中的小程序 AppId 和其他相关字段，如下图所示：

AppID 配置

  • Appid 填写您的已认证、已备案的微信小程序
  • 接口请求地址改为您已经部署的Web端请求地址

二、打包命令说明

确保已正确安装依赖和环境后，在项目根目录中执行以下命令：

pnpm install
pnpm build:mp-weixin    # 打包用于发布
pnpm dev:mp-weixin      # 本地调试使用（可选）

三、运行调试

打包完成后，项目目录下将生成：

dist/dev/mp-weixin

调试步骤：

  1. 打开 微信开发者工具
  2. 点击「导入项目」
  3. 选择目录：dist/dev/mp-weixin
  4. 完成导入即可预览与调试

界面参考：

导入项目 选择目录 目录结构

表单后台配置小程序参数

导入完成后，必须在表单管理后台，系统设置中，进行小程序参数配置，AppId、Secret为必须参数。

图片

配置服务器域名

发布自己的小程序之前，务必先配置一下域名，这样小程序才能使用网络功能，不配置域名，任何互联网的访问功能(api访问)都会失败。

首先登陆【小程序管理后台】，选择开发管理->开发设置->服务器域名，配置自己的合法域名。image.pngimage.png这里要注意，ip地址是不可以配置的，必须是域名！

因而没有域名的请先注册域名，而后备案，之后用域名进行配置。

四、发布流程

若目标为正式发布，可跳过本地调试，直接执行：

pnpm build:mp-weixin

然后打开微信开发者工具，导入目录：dist/build/mp-weixin，并完成后续发布流程（如填写版本信息、上传等）。

五、常见问题

1. 本地运行与发布的区别？

项目 本地运行 正式发布
执行命令 pnpm dev:mp-weixin pnpm build:mp-weixin
输出目录 dist/dev/mp-weixin dist/build/mp-weixin
场景用途 开发调试 正式部署/发布