当前位置：首页 > uni-app

uniapp编译

2026-03-26 16:54:49uni-app

uniapp 支持将代码编译到不同平台（如微信小程序、H5、App等），编译流程因目标平台而异。以下是常见平台的编译方法：

H5 平台编译
运行命令 npm run build:h5 或通过 HBuilderX 可视化界面操作。编译后的文件默认输出到 dist/build/h5 目录，可直接部署到 Web 服务器。

微信小程序编译
运行命令 npm run build:mp-weixin 或通过 HBuilderX 选择“发行”->“小程序-微信”。编译结果在 dist/build/mp-weixin 目录，需通过微信开发者工具导入并上传代码。

App 平台编译
需使用 HBuilderX 的“原生 App 云打包”或“本地打包”功能。云打包直接生成安装包，本地打包需配置原生环境（如 Android Studio、Xcode）。

在 vue.config.js 或 manifest.json 中可修改编译选项，例如：

// vue.config.js
module.exports = {
  configureWebpack: {
    // 自定义 Webpack 配置
  }
}

// manifest.json
{
  "h5": {
    "publicPath": "/custom-path/"
  }
}

编译报错：模块未找到
检查 node_modules 是否完整，运行 npm install 重新安装依赖。若为第三方库问题，尝试在 transpileDependencies 中显式配置需转译的模块。

编译后样式丢失
确认是否使用了平台特有样式（如 v-if 与 v-show 的差异），或检查 @import 路径是否正确。H5 平台可启用 scoped CSS 避免污染。

分包优化
在 pages.json 中配置 subPackages 实现分包加载，减少主包体积：

{
  "subPackages": [{
    "root": "subpackage",
    "pages": ["pageA", "pageB"]
  }]
}

条件编译
使用 #ifdef 和 #ifndef 实现多平台差异化代码：

// #ifdef H5
console.log('仅在 H5 平台生效');
// #endif

自定义编译器插件
通过 chainWebpack 扩展 Webpack 配置，例如添加 SVG 转换规则：

uniapp编译

chainWebpack(config) {
  config.module.rule('svg').test(/\.svg$/).use('file-loader').loader('file-loader');
}

标签: uniapp

分享给朋友：