在Vite/Vue3 3应用程序中使用Vue2组件

Question

我正在使用Vite/Vue3 3(如果有关系的话，可以使用TypeScript)，我想使用以下Vue2组件：https://github.com/tylerkrupicka/vue-json-component

在使用以下声明导入它之后：

import JSONView from 'vue-json-component'

然后像这样使用它：

<JSONView:data="{foo:'bar',toto:'baz'}" root-key="root" class="tree" />

Vite报告了以下错误：

✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

node_modules/vue-json-component/dist/index.module.js:2:7:
  2 │ import Vue from 'vue';

我的理解是，Vite并不能很好地使用Vue2。我一直试图找到一个声明Vue2组件的解决方案，或者“包装”它们，使它们与Vite/Vue3 3一起工作，但没有成功。

如果可能的话，我希望避免对这个项目进行分叉，以便为Vue3重写它。

谢谢

Answer 1

在package.json中添加以下内容：

"dependencies": {
-  "vue": "^2.6.12",
+  "vue": "^3.1.0",
+  "@vue/compat": "^3.1.0"
   ...
},
"devDependencies": {
-  "vue-template-compiler": "^2.6.12"
+  "@vue/compiler-sfc": "^3.1.0"
}