Question

未捕获的类型错误：将 Vue 升级到 3.x 后无法读取未定义的属性（读取“extend”）

2022-01-22

19672

javascript vue.js vuejs3

今天我将我的 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 不支持使用 extend 加载第三方组件。我应该怎么做才能解决这个问题？是否可以使用 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 操作：

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