使用Vue.js和rollup.js开发VS Code扩展时编译出现未解析依赖错误如何解决

问题根因 #

1. 项目未安装Vue核心依赖，仅安装了Vue单文件组件编译需要的@vue/compiler-sfc，Rollup无法在node_modules中找到vue模块。
2. Rollup配置中output.globals指定了vue为全局变量，Rollup默认会将其视为外部依赖不进行打包，如果没有在侧边栏的HTML中手动引入Vue的CDN资源，运行时也会报错。

解决方案 #

1. 安装Vue核心依赖
   根据你使用的Vue版本选择对应安装命令：

• 若使用Vue 3（适配你当前安装的rollup-plugin-vue@6和@vue/compiler-sfc）：

npm install vue@3

• 若使用Vue 2：需要同步降级Rollup相关插件版本

npm install vue@2 rollup-plugin-vue@5 vue-template-compiler

2. 修正Rollup配置
   打开rollup.config.js，删除output配置中的globals: {vue: 'vue'}项，即可将Vue打包进最终产物。
   同时调整@rollup/plugin-node-resolve的配置，替换废弃的jsnext字段为module：

nodeResolve({  
  module: true,  
  main: true, 
  browser: true,  
  dedupe: ["vue"],
})

如果你不需要将Vue打包进产物，想要通过CDN引入减少包体积，可以保留output.globals配置，只需要在VS Code侧边栏加载的HTML模板中提前引入对应版本的Vue CDN资源即可。

3. 适配Vue版本的入口写法（仅Vue 3需要）
   如果使用Vue 3，修改web/pages/Sidebar.js的代码为Vue 3的初始化语法：

import { createApp } from "vue";
import Sidebar from "@/components/Sidebar.vue";

createApp(Sidebar).mount("#app");

4. 清理缓存重新编译
   删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件，重新执行npm install安装依赖，之后运行npm run watch即可正常编译。

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