Vue 3 + Rollup构建插件时遭遇未使用变量错误求助

我之前也碰到过一模一样的问题——当Vue组件里保留空的<script>或<style>标签时，rollup-plugin-vue会生成一些Rollup判定为未引用的代码片段，进而触发"未使用变量"的错误。下面给你几个可行的解决思路：

方法1：调整rollup-plugin-vue的配置（推荐） #

问题的核心是默认配置下，rollup-plugin-vue会为组件生成额外的变量（比如文件名相关的__file），而空标签场景下这些变量完全用不上，就会被Rollup标记为未使用。修改插件配置可以从根源解决这个问题：

import vue from 'rollup-plugin-vue'
export default {
  input: 'src/index.js',
  output:[
    { file: 'dist/bundle.js', format: 'esm' }
  ],
  plugins:[ 
    vue({
      script: {
        // 禁用导出文件名变量，避免未使用警告
        exposeFilename: false,
        // 不需要defineModel语法糖的话也可以关闭
        defineModel: false
      },
      style: {
        // 关闭CSS模块化（如果你的组件不需要）
        modules: false,
        // 不提取单独的CSS文件（如果不需要分离样式）
        extract: false
      }
    }) 
  ],
  external: ['vue']
}

方法2：给空标签添加占位内容 #

如果不想改动Rollup配置，也可以给空的<script>和<style>加些简单的占位内容，让Rollup认为这些代码是有效的：

修改你的Test.vue：

<template>
  <div>
    <h1 v-testdirective>Test Heading</h1>
  </div>
</template>
<script>
// 保留默认导出，哪怕是空对象也能避免多余变量生成
export default {}
</script>
<style>
/* 添加空注释作为占位，消除样式相关的未使用变量警告 */
</style>

如果用Vue 3的<script setup>语法，空的setup标签也不会触发这个问题：

<script setup>
// 空的setup脚本不会生成多余变量
</script>

方法3：忽略Rollup的未使用变量警告 #

如果只是警告而非编译错误，可以在Rollup配置里添加钩子过滤这类警告：

export default {
  // ...其他配置项
  onwarn(warning, warn) {
    // 跳过"未使用变量"类型的警告
    if (warning.code === 'UNUSED_VARIABLE') return;
    // 其他警告正常输出
    warn(warning);
  }
}

以上方法都能解决保留空标签时的编译问题，优先推荐方法1，因为它从根源上避免了多余代码的生成。

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