未捕獲的類型錯誤：將 vue 升級到 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 不支持使用擴展加載第三方組件的 inte.net 進行搜索。 我應該怎么做才能解決這個問題？ 是否可以使用 vue 3 代碼來執行與 vue 2 相同的操作？ 如何調整我的 Vue 2 代碼？ 這是帶有 extend 的 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 ：

主.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