Uncaught TypeError: Cannot read properties of undefined (reading 'extend') after upgrade vue to 3.x

Question

今天我将我的 google chrome 扩展 vue 版本升级到 3.x，当运行应用程序时， google chrome 扩展弹出控制台显示如下错误：

commons1.js:13392 Uncaught TypeError: Cannot read properties of undefined (reading 'extend')
    at Object../src/public/widget/index.js (commons1.js:13392)
    at __webpack_require__ (popup.js:23)
    at Object../src/popup/st.js (commons1.js:12725)
    at __webpack_require__ (popup.js:23)
    at Object../src/popup/app.js (commons1.js:12543)
    at __webpack_require__ (popup.js:23)
    at Object../src/popup/index.js (commons1.js:12687)
    at __webpack_require__ (popup.js:23)
    at popup.js:163
    at Function.__webpack_require__.O (popup.js:57)

我是从网上搜索的，好像是vue 3 did not support using extend to load third party component。我应该怎么做才能解决这个问题？是否可以使用 vue 3 代码来执行与 vue 2 相同的操作？如何调整我的 Vue 2 代码？这是带有扩展的 vue 2 代码，如下所示：

export default Vue.extend( {
  template ,
  data : ()=>({})
})

Answer 1

在 vue 3 中没有名为 Vue 的导出成员，与 Vue.extend 等效的正确代码是：

import { defineComponent } from 'vue';

export default defineComponent({
  template ,
  data : ()=>({})
})

Answer 2

喜欢 dumentation:

main.js:

import Vue from 'vue'
import App from './App.vue'

import vuetify from '@/plugins/vuetify' // path to vuetify export


Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App),
}).$mount('#app')

在 src/plugins/vuetify.js 中创建一个文件：

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Answer 3

如果 toastr 库出现此错误，此解决方案适用于您：

在我的构建 json.

中 我在导入 toastr 库 之前导入了 jQuery 之后，同样的问题为我解决了

So please import toastr library after jQuery

Uncaught TypeError: Cannot read properties of undefined (reading 'extend') after upgrade vue to 3.x

Uncaught TypeError: Cannot read properties of undefined (reading 'extend') after upgrade vue to 3.x

javascript

vue.js

vuejs3