uniapp 多环境打包

uni-app 项目中配置环境变量主要有如下三种方式:

第一种:vue-config.js
在 vue.config.js 中可以修改 webpack 配置,包括环境变量,具体参考 vue-config.js。
https://uniapp.dcloud.net.cn/collocation/vue-config.html

第二种:package.json
在自定义条件编译平台时,可以在 package.json 文件的 env 节点下配置环境变量,具体参考 package.json

package.json扩展配置用法:

{
   
   
    /**
     * package.json其它原有配置 
     * 拷贝代码后请去掉注释!
     */
    "uni-app": {
   
   // 扩展配置
        "scripts": {
   
   
            "custom-platform": {
   
    //自定义编译平台配置,可通过cli方式调用
                
### UniApp 的多端打包流程 #### 打包前准备 在进行多端打包之前,开发者需要确保项目的 `manifest.json` 文件已经正确配置了应用的基础信息,如应用名称、APPID、Logo 和版本号等内容[^1]。这些基础设置决定了最终生成的应用包的元数据。 #### 平台选择与配置 UniApp 提供了一键打包功能,能够支持多种目标平台的选择,包括但不限于微信小程序、H5 页面以及原生 App 应用等[^2]。通过 HBuilderX 工具或者命令行方式可以灵活切换并指定具体的打包目标。 #### 使用图形界面操作 对于不熟悉命令行工具的新手来说,在 HBuilderX 中可以直接通过菜单栏中的 “发行” 功能来进行打包工作[^4]。只需依次选择对应的发布平台,并按照提示填写必要的参数即可启动整个构建过程。 #### 命令行自动化打包 除了 GUI 方式外,还可以利用 NPM 脚本来实现更加高效的持续集成部署场景下的自动打包需求。例如针对不同品牌定制化的小程序版本可以通过定义特定 script key 来简化重复劳动: ```bash npm run dev:tt-brandA npm run build:ks-brandB ``` 这里展示了两个例子分别代表头条微头条和快手两套独立渠道的品牌变体解决方案[^3]。实际项目可根据业务逻辑扩展更多类似的分支处理策略满足复杂的商业应用场景需求。 #### 完成后的产物位置 当所有的编译步骤都顺利完成之后,默认情况下会把结果存放在工程根目录下的 dist/build 子路径里;如果是调试模式则可能是 dist/dev 下面找到各个对应类型的输出物。 --- ### 示例代码片段展示快速验证环境搭建情况 如果只是想简单测试当前开发环境下能否正常渲染页面效果而无需经历完整的正式上线流程的话,则可考虑采用如下简易方法直接预览网页版表现形式: ```javascript // main.js 或其他入口文件处加入以下内容以便于本地即时查看改动反馈速度更快些. if (process.env.NODE_ENV === 'development') { console.log('Development mode detected.'); } ``` 以上仅作为辅助手段帮助理解整体架构并无强制依赖关系. ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值