一、Vue3 项目打包

Vue 3 的项目使用npm run build来构建打包，打包后的文件默认在项目根目录的/dist下。

打包的注意事项如下（以 vue-cli 为例）：

确保正确配置环境变量
使用.env.development和.env.production文件来配置开发和生产环境的变量，并在项目中通过process.env.VUE_APP_[变量名]访问。
Vue Router 使用路由懒加载
使用() => import('组件的路径')动态导入组件，webpack 或 vite 会将动态导入的组件单独打包。
组件库使用按需加载
在使用如 Element-plus 等组件库时使用按需引入的方式来导入组件。
第三方库使用 cdn 引入
第三方库如 Element-plus 通常会被构建到主包中，因此可以选择不将第三方库构建到主包而是使用 cdn 来引入第三方库。这将显著减小主包体积
使用 gzip 压缩
可以使用 webpack 的插件compression-webpack-plugin在打包时开启 gzip 压缩。

二、uniapp 的多端打包

下面主要介绍 uniapp 打包 H5 端、App 端、微信小程序的流程。

使用 vue-cli 创建的可以在终端使用npm run build:h5来构建，或者在 HBuilder 中点击发行 PC-Web 来构建。

使用 HBuilder 创建的项目则在 HBuilder 中通过发行 PC-Web 构建。

构建优化部分可以参考上面的 Vue 3 项目，下面将简述使用 vite 时不同的地方：

配置环境变量
使用.env.development和.env.production文件来配置开发和生产环境的变量，并在项目中通过import.meta.env.VITE_[变量名]访问。
使用 gzip 压缩。
可以使用 Vite 的插件vite-plugin-compression在打包时开启 gzip 压缩。

配置manifest.json文件
在 HBuilder 中打开项目的manifest.json文件，查看 AppID 是否有没有填写，如果没有填写点击右侧的重新获取来生成 AppID（需要登录 DCloud 账号）。

在App启动界面配置可以选择配置项目启动界面的启动图。

在App模块配置以及App权限配置配置项目所需要的模块以及权限。
使用 App 云打包
点击工具栏的发行，并选择 App 云打包，配置 Android 或 IOS 打包设置。
生成证书
Android 和 IOS 证书是签名，用于表明开发者身份。Android 可以选择使用测试证书，IOS 需要成为苹果开发者并申请证书，可以参考 DCloud 的教程：
Android平台签名证书(.keystore)生成指南
 iOS证书(.p12)和描述文件(.mobileprovision)申请
开始云打包
配置好证书后就可以进行云打包了，点击打包等待打包完成，打包完成后就可以在控制台看到打包好文件夹的目录。

微信小程序端的打包需要先将项目编译为微信小程序版本，之后使用微信开发者工具上传。

将项目编译为微信小程序
在终端运行npm run build:mp-weixin，或者在 HBuilder 点击发行进行微信小程序的构建。

将构建好的项目/dist/build/mp-weixin在微信开发者工具打开
上线前的配置
首先要填写 App ID。之后登录小程序平台，在左侧菜单进入开发管理，再进入开发设置，在下方的服务器域名修改配置，将项目的 API 地址添加到 request 合法域名中。
上传开发版
在微信开发者工具的调试器中检测代码质量，将出现的问题都解决。比如在项目的本地设置中开启“上传代码时自动压缩脚本文件”、关闭“不校验合法域名”等等。如果主包过大，请参考微信开发文档进行分包。

如果质量检测都通过，则可以通过右上角的上传按钮将当前项目上传为开发版
发布体验版并提交审核
上传成功后，在微信小程序平台进入版本管理就可以看到上传的开发版本。点击右侧的下拉选项将其设置为体验版，点击提交就能看到体验版的二维码。

体验版如果测试下来都没有什么问题的话就可以提交审核了。审核通过后，小程序端即上线成功。