使用Rollup编译Vue项目时提示openBlock未导出错误怎么解决？

• 版本不兼容：当前使用的rollup-plugin-vue@6+仅适配Vue3，会将.vue单文件组件的模板编译为包含openBlock等Vue3专属API的渲染函数，而你的项目依赖是Vue2，runtime包中不存在对应API，因此触发导出缺失错误。
• 插件顺序错误：.vue文件必须先由vuePlugin编译为标准JS代码，才能交由其他插件处理。将commonjs放在vuePlugin之前时，commonjs会直接解析.vue的原始模板内容，无法识别HTML语法，因此触发语法错误。

1. 替换适配Vue2的编译插件
   卸载当前高版本rollup-plugin-vue，安装适配Vue2的v5版本，同时安装和项目Vue版本完全一致的vue-template-compiler（版本必须完全匹配，否则会编译失败）：

npm uninstall rollup-plugin-vue
npm install rollup-plugin-vue@5.1.9 vue-template-compiler@<你的项目Vue版本号> -D

2. 修正插件执行顺序
   Rollup插件按数组从前往后顺序执行，调整你的plugins数组为以下正确顺序：

const plugins = [
  vuePlugin(),
  replace({
    preventAssignment: true,
    'process.env.NODE_ENV': JSON.stringify( 'production' )
  }),
  nodeResolve({
    extensions: ['.js', '.vue'] // 识别.vue后缀的模块导入
  }),
  commonjs({
    include: 'node_modules/**' // 仅处理node_modules下的CommonJS模块
  }),
  babel({
    exclude: 'node_modules/**',
    babelHelpers: 'bundled',
    extensions: ['.js', '.vue'] // 处理.vue文件中的script部分
  }),
  multi(),
]

3. 可选优化配置
   如果项目没有运行时编译模板的需求，可以将app.js中的Vue引入替换为体积更小的runtime版：

// 替换前
import Vue from 'vue/dist/vue'
// 替换后
import Vue from 'vue/dist/vue.runtime.esm.js'

内容的提问来源于stack exchange，提问作者E-g