Rollup打包Vue2 Composition API模块提示ref未定义如何解决

你的问题核心是Rollup配置的output.globals字段不匹配，以及部分插件配置、使用逻辑存在疏漏，按以下步骤修改即可：

1. 修正Rollup核心配置 #

修复globals字段映射 #

external数组中声明的外部依赖名必须和output.globals的键完全对应，你之前的配置中用compositionApi作为键和实际依赖名@vue/composition-api不匹配，会导致依赖引入失效。

调整插件执行顺序 #

@rollup/plugin-node-resolve必须放在插件队列最前方，Rollup插件执行顺序为从上到下，需要先完成依赖解析再执行后续转译逻辑。

补充buble配置 #

禁止buble转译ES模块语法，避免import语句被异常转换。

修改后的完整配置如下：

import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';
import vue from 'rollup-plugin-vue'; 
import buble from '@rollup/plugin-buble';
import scss from 'rollup-plugin-scss';

export default {
    external: ['vue', '@vue/composition-api'],
    input: 'src/index.js',
    output: {
        name: 'BasicDropdown',
        exports: 'named',
        format: 'cjs',
        globals: {
            vue: 'Vue',
            '@vue/composition-api': 'VueCompositionAPI'
        }
    },
    plugins: [
        nodeResolve(), // 放在插件队列最前方
        scss(),
        vue({
            css: true,
            compileTemplate: true,
            scss: true,
            preprocessStyles: true
        }),
        commonjs(),
        buble({
          transforms: { modules: false } // 禁止转译ES模块语法
        }), 
    ],
};

2. 校验依赖版本 #

Vue2项目使用的rollup-plugin-vue必须为5.x版本，6.x及以上版本仅支持Vue3，版本不匹配会导致单文件组件内的import语句被异常丢弃。
你可以执行以下命令安装适配版本：

npm install rollup-plugin-vue@5.1.9 --save-dev

3. 校验组件代码逻辑 #

ref等Composition API提供的方法只能在setup()函数、组合式函数内部调用，不能放在Options API的data()、methods等选项中，你报错信息提示错误出现在data()内，需要检查是否存在把ref调用写在data选项中的违规写法。

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