Rollup+Vue2项目构建失败：出现resolveComponent导出缺失及模板语法报错

安全阿岳

2026-10-26

问题根因定位

你遇到的两个报错本质是三个完全独立的配置错配叠加导致的，不是单纯调整插件顺序就能解决的：

核心版本错配：当前安装的rollup-plugin-vue是6.x及以上版本，这个版本的插件是专门适配Vue3的，模板编译逻辑会直接生成调用resolveComponent、createVNode、openBlock这类Vue3专属运行时API的代码，但你项目实际引入的是Vue2的ESM运行时包，本身根本没有这些导出方法，所以才会抛出「'resolveComponent' is not exported by vue.runtime.esm.js」的错误。
插件顺序逻辑错误：Rollup的插件执行有固定的优先级规则，你原来的插件数组顺序完全打乱了处理流程：如果把commonjs插件放在vue插件前面，它会提前去解析还没被vue插件编译转换的原始.vue文件，拿到文件里的HTML模板标签时，自然会因为遇到非JS语法抛出「Unexpected token <」的解析错误。
插件选型冗余/使用废弃版本：配置里同时启用了rollup-plugin-postcss和rollup-plugin-sass两个样式处理插件，会重复执行sass编译流程；同时用的是已经被官方废弃的旧版插件导入方式，没有覆盖vue插件生成的虚拟文件的解析规则。

修正后可直接运行的配置

首先必须对齐依赖版本，不锁版本怎么调整都会出问题：

前置依赖版本要求
Vue 固定安装2.7.x 正式版本（Vue2最后一个兼容组合式API的稳定版）
rollup-plugin-vue 必须锁定为5.1.9版本（这是适配Vue2的最后一个稳定版，6.x及以上版本全是为Vue3设计的，不兼容Vue2）
替换已经废弃的旧版插件：原来的rollup-plugin-node-resolve、rollup-plugin-commonjs已经停止维护，换成官方现在维护的@rollup/plugin-node-resolve、@rollup/plugin-commonjs、@rollup/plugin-babel

正确的插件顺序要遵循「先把非JS的SFC、静态资源转成合法JS，再解析依赖路径，再做模块格式兼容，最后做JS语法转译」的逻辑，修正后的完整配置如下：

import vue from 'rollup-plugin-vue'
import postcss from 'rollup-plugin-postcss'
import sass from 'sass'
import image from '@rollup/plugin-image'
import babel from '@rollup/plugin-babel'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'

const plugins = [
  // 第一位：先处理Vue单文件组件，把.vue文件拆成template、script、style三个合法JS块
  vue({
    preprocessStyles: true,
    css: true,
    compileTemplate: true,
    // 关键配置：明确告诉插件用Vue2的模板编译逻辑，不要生成Vue3的API调用
    target: 'browser'
  }),
  // 处理图片静态资源
  image(),
  // 统一处理样式编译，替代原来重复的rollup-plugin-sass
  postcss({
    use: [[sass, { implementation: sass }]],
    extract: true
  }),
  // 解析node_modules里的依赖路径
  resolve({
    browser: true,
    extensions: ['.js', '.vue', '.json']
  }),
  // 把CommonJS格式的依赖转成ES模块，供Rollup打包
  commonjs({
    include: /node_modules/,
    extensions: ['.js', '.vue']
  }),
  // 最后转译JS语法，关键要把vue插件生成的虚拟模板文件纳入处理范围
  babel({
    exclude: 'node_modules/**',
    include: ['**/*.js', '**/*.vue?vue&type=template*'],
    babelHelpers: 'bundled'
  })
]

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist', // 原配置的diss是dist的拼写错误
    format: 'iife',
    sourcemap: false
  },
  plugins
}

常见踩坑提醒

不要尝试在不降级rollup-plugin-vue版本的前提下调整配置：哪怕把插件顺序调的再合理，Vue3版的插件生成的代码永远是调用Vue3的运行时API，和Vue2的包天然不兼容。
不要单独安装rollup-plugin-sass：现在的rollup-plugin-postcss已经原生支持sass编译，两个插件同时运行会重复处理sass文件，很容易出现样式丢失、编译报错的问题。
注意Babel的include范围：必须把vue插件生成的带?vue&type=template后缀的虚拟文件纳入转译范围，否则会出现模板编译后的代码因为语法问题被解析失败的报错。
原配置里的输出目录diss是dist的拼写错误，调整后构建的文件会正常输出到dist文件夹，避免找错路径。

内容的提问来源于stack exchange，提问作者Tobias Schäfer