未捕获的类型错误：无法读取未定义的属性（读取“使用”）

Posted 2023-02-16

【中文标题】未捕获的类型错误：无法读取未定义的属性（读取“使用”）

【英文标题】：Uncaught TypeError: Cannot read properties of undefined (reading 'use')

【发布时间】：2022-01-12 00:58:03

【问题描述】：

我正在尝试使用 vue js 开始一个新项目。我想我通过终端拥有了我需要的所有依赖项。我安装了 npm、vue、vue-bootstrap 和 vue-router。错误来自 router.js 的第 7 行，Vue.use(VueRouter)。

这是我的 main.js 的代码

import Vue from "vue"
import App from "./App.vue"
import router from "./router.js"
import BootstrapVue from "bootstrap-vue"
import "bootstrap/dist/css/bootstrap.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(BootstrapVue)

Vue.config.productionTip = false

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

这是我的 router.js

import Vue from "vue"
import VueRouter from "vue-router"
import Home from "@/pages/Home.vue"
import About from "@/pages/About.vue"
import Contact from "@/pages/Contact.vue"

Vue.use(VueRouter)

export default new VueRouter(
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    
      path: '/',
      name: 'home',
      component: Home
    ,
    
      path: '/about',
      name: 'about',
      component: About
    ,
    
      path: '/contact',
      name: 'contact',
      component: Contact
    
  
  ]
)

对不起，我把 import vue 行和代码指示器放在同一行，它被切断了，我仍然有错误。

完整的错误是这样的：

router.js?41cb:7 Uncaught TypeError: Cannot read properties of undefined (reading 'use')
    at eval (router.js?41cb:7)
    at Module../src/router.js (app.js:1261)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (main.js:12)
    at Module../src/main.js (app.js:1141)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1274)
    at __webpack_require__ (app.js:849)
eval    @   router.js?41cb:7
./src/router.js @   app.js:1261
__webpack_require__ @   app.js:849
fn  @   app.js:151
eval    @   main.js:12
./src/main.js   @   app.js:1141
__webpack_require__ @   app.js:849
fn  @   app.js:151
1   @   app.js:1274
__webpack_require__ @   app.js:849
checkDeferredModules    @   app.js:46
(anonymous) @   app.js:925
(anonymous) @   app.js:928

【问题讨论】：

你能分享问题中的完整错误

我的猜测是错误实际上来自 main.js - 因为 Vue 没有导入，所以 Vue 没有声明，Vue 是 undefined - 因此错误，无法读取 .use Vue (undefined)

对不起，我的错误，它在我的代码中但在这里的sn-p中被切断了，我已经在主js上导入了vue

你用的是什么版本的 Vue？

Using Vue 3.2.24 -- BootstrapVue 不支持 Vue 3，因此您必须使用 Vue 2 或使用其他组件库

【参考方案1】：

使用 vue 3 创建应用必须使用 Vue.createApp 方法，而不是创建新的 vue 实例。

new Vue(
  router,
).$mount('#app')

变成：

const app = Vue.createApp(
      router,
)

app.mount('#app')

请记住，渲染 api 也发生了变化，而在 2 小时内被注入函数 args，现在您必须从 vue.xml 导入它。例如：

import  h  from 'vue'
export default 
  render() 
    return h('div')
  

有关文档的更多信息：here。

更新。根据 cmets 的要求，我扩展了示例，包括如何在 vue 3 上使用插件。

回到上面的例子，如果我们想使用插件，我们需要在挂载之前添加 .use 方法。例如：

const app = Vue.createApp(
      router,
)
app.use(ThePluginIWantToUse)

app.mount('#app')

【讨论】：

感谢您的帮助，我才使用vue几个月，对旧版本不太熟悉。我一直在查看文档并实施了您建议的更改，但我遇到了同样的错误。我认为 /node_modules/vue 和 /node_modules/vue-router 中的文件（主要是 .ts 文件）可能有问题，因为它们看起来与我的工作项目非常不同

【参考方案2】：

Hiws 的回答：

BootstrapVue 不支持 Vue 3，因此您必须使用 Vue 2 或使用其他组件库

谢谢。