Rollup打包Vue3 ESM组件包后setup内onMounted不生效问题求解

你遇到的两个警告核心原因是打包过程中Vue组件的上下文解析异常，或者组件产物内置了额外的Vue实例，和宿主项目的Vue实例上下文不共享。可按以下步骤修复：

修复步骤 #

• 1. 升级rollup-plugin-vue到适配Vue3的版本
     确保你安装的是rollup-plugin-vue@6.x及以上版本，低于v6的版本仅适配Vue2，无法正确解析Vue3的Composition API语法，会导致setup内的生命周期、ref上下文丢失。
     安装命令：

  npm install rollup-plugin-vue@^6.0.0 -D
  

• 2. 正确配置Vue为外置依赖
     检查你的package.json，将vue添加到peerDependencies字段中，确保rollup-plugin-peer-deps-external可以正确识别并外置vue，不会将vue打包到你的组件产物里，避免出现两个Vue实例同时运行的问题：

  // package.json
  {
    "peerDependencies": {
      "vue": "^3.2.0"
    }
  }
  

• 3. 修正Rollup配置里的commonjs插件参数
     不要将.vue后缀加入@rollup/plugin-commonjs的extensions配置，.vue文件专属rollup-plugin-vue处理，commonjs错误解析.vue文件会破坏组件内部上下文：

  // rollup.config.js 修正对应配置
  const extensions = ['.js'] // 移除.vue后缀
  

• 4. 可选修正模板变量引用
     你当前模板里写的是{{ 1 }}，如果要使用setup返回的响应式变量a，可修改为{{ a }}，该问题不影响生命周期运行。

修改完成后重新打包组件，再引入测试即可解决setup内onMounted不生效、ref报警告的问题。

内容的提问来源于stack exchange，提问作者Yeachan