uni-app如何设置打包时不生成Vendor文件-uni-app-PHP中文网

uni-app可通过配置使vendor.js不打入主包：vue2项目需在vue.config.js中配置splitchunks并启用manifest.json的subpackages:true；vue3+vite项目则需在manifest.json中配置mini.optimization.splitchunks，且依赖须仅在分包中引用。

uni-app如何设置打包时不生成vendor文件

uni-app 无法完全不生成 vendor.js，因为这是 webpack / vite 打包机制中用于提取公共依赖的默认产物；但你可以让它「不打入主包」，转而拆分到分包或按需加载——这才是实际可落地的目标。

为什么 vendor.js 总在主包里？

默认情况下，uni-app（尤其 Vue2 + HBuilderX 构建链）会把所有 node_modules 中的依赖统一打进主包的 common/vendor.js。即使你写了分包，只要某个分包里 import 了主包已有的库（比如 echarts），该库仍可能被重复塞进主包，而非单独提取。

manifest.json 中未启用分包优化："mp-weixin": { "optimization": { "subPackages": true } } 缺失或拼写错误
分包页面里直接 import 了主包 global 引入的工具类（如封装的 request 实例），导致 webpack 认为主包必须包含这些模块的依赖
使用了 Vue2 项目但误配了 vite.config.js 的 manualChunks —— HBuilderX 的 Vue2 构建不走 vite，该配置根本不会生效

Vue2 项目（HBuilderX 默认）怎么让 vendor 脱离主包

必须通过 vue.config.js 配置 webpack 的 configureWebpack.optimization.splitChunks，并确保 HBuilderX 能识别它（需放在项目根目录，且项目为 Vue2）。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

创建 vue.config.js，内容示例如下：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          echarts: {
            name: 'echarts',
            test: /[\/]node_modules[\/](echarts)[\/]/,
            priority: 20,
            chunks: 'all'
          },
          // 可追加其他库，如 uview、tencent-im 等
        }
      }
    }
  }
}

确认 manifest.json 中已开启分包优化："mp-weixin": { "optimization": { "subPackages": true } }
确保分包页面中不要 import 主包 main.js 里已 Vue.use() 或全局挂载的插件，否则 webpack 会强制把它们拉进主包
重启 HBuilderX 并「发行 → 小程序-微信」，不要用「运行」——只有「发行」才走完整构建流程并应用 vue.config.js

Vue3 + Vite 项目怎么控制 vendor 拆分

Vite 项目不能靠 vue.config.js，得用 vite.config.js 的 build.rollupOptions.output.manualChunks，但 uni-app 小程序构建对它的支持有限，优先走 mini.optimization.splitChunks。

在 vite.config.js 中添加如下配置（仅辅助识别，非主力）：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          echarts: ['echarts'],
          uview: ['uview-ui']
        }
      }
    }
  }
})

真正起效的是 manifest.json 中的 mini.optimization.splitChunks（注意不是 build.rollupOptions）：

"mini": {
  "optimization": {
    "splitChunks": {
      "cacheGroups": {
        "echarts": {
          "name": "echarts",
          "test": "[\\/]node_modules[\\/]echarts[\\/]",
          "priority": 20,
          "chunks": "all"
        }
      }
    }
  }
}

这个配置只对 uni-app 的小程序平台生效，且必须配合分包使用——即 echarts 相关代码只能出现在分包页面中，主包页面不能 import 它
如果主包 tabBar 页面必须用 echarts，那它大概率还是会被打进主包，此时只能换方案：用 canvas 渲染轻量图表，或改用小程序原生 canvas API

容易被忽略的关键点

很多人试了各种配置仍失败，问题往往出在「依赖路径没匹配上」或「引用方式破坏了 chunk 边界」。

test 正则里的路径分隔符必须双反斜杠转义，Windows 和 macOS 下都要写成 [\\/]node_modules[\\/]echarts[\\/]
分包页面里不能 import { xxx } from '@/utils/request'，如果这个 request 文件又 import 了 axios，而 axios 又被主包用了，整个链路就又被拖回主包
subPackages: true 开启后，检查构建输出目录（如 unpackage/dist/build/mp-weixin）里是否真出现了 subN/echarts.js —— 如果没有，说明配置未生效或未触发分包引用
某些 UI 库（如 uView）内部有大量 require 动态引入，webpack 无法静态分析，splitChunks 对它们效果有限，这时得手动改用按需导入 + 分包封装组件