使用rollup.js开发VS Code扩展时Vue兼容异常，缺失哪些配置或逻辑？

问题根因 #

你的Rollup配置中将vue标记为外部依赖，指定从全局变量Vue读取依赖，但Webview的HTML中没有提前注入Vue全局脚本，同时autoExternal插件会自动将node_modules下的vue排除出打包产物，最终导致运行时找不到Vue。

优先修改方案（无外部依赖，推荐） #

• 移除rollup.config.js中的autoExternal()插件调用，避免vue被自动标记为外部依赖
• 删除rollup.config.js中output.globals配置项里的'vue': 'Vue'规则，不需要从全局环境读取Vue
• 确认你安装的rollup-plugin-vue版本为6.x+，该版本才支持Vue 3语法的编译

路径校验（按需调整） #

检查当前alias配置：@默认映射为根目录下的src文件夹，如果你代码中import App from "@/webviews/src/App.vue"的实际路径和映射规则不匹配，调整alias的replacement值到对应目录即可。

备选方案（保留vue为外部依赖） #

如果你不想把vue打包进产物，可以选择在Webview的HTML中提前引入Vue脚本：

1. 下载Vue 3的生产版本脚本放到扩展的media目录下，也可以直接引用本地node_modules中vue/dist/vue.global.prod.js的路径
2. 在SidebarProvider.ts的_getHtmlForWebview方法中新增Vue脚本的路径解析：

const vueUri = webview.asWebviewUri(
  vscode.Uri.joinPath(this._extensionUri, "media", "vue.global.prod.js")
);

3. 在返回的HTML代码中，app.js的script标签之前插入Vue的引入逻辑：

<script src="${vueUri}" nonce="${nonce}"></script>

修改完成后重新执行Rollup打包，再启动扩展调试即可正常渲染Vue组件。

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