解决vue创建项目使用vue-router和vuex报错Object(...)is not a function

更新时间：2024年02月29日 17:17:23 作者：敲代码的77

这篇文章主要介绍了解决vue创建项目使用vue-router和vuex报错Object(...)is not a function问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue创建项目使用vue-router和vuex报错Object(...)is not a function

之前创建项目使用还好好的，这次想新建个项目练练手，才用了vue-router就报错了，记录下自己修改了一个下午的bug,泪目了（其实是版本问题，小小剧透）

报错：

Object(...) is not a fuction

创建项目时用的是vue-cli3命令：vue create projectName

选择vue2：

main.js

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

Vue.config.productionTip = false

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

router文件夹下的index.js

import  Vue  from 'vue'
import  VueRouter  from 'vue-router'

const testA = () => import('../views/testA.vue')
const testB = () => import('../views/testB.vue')
const testC = () => import('../views/testC.vue')

//1.安装插件
Vue.use(VueRouter);

//2.创建路由对象
const routes = [
  {
    path: '',
    redirect: '/testa'
  },
  {
    path: '/testa',
    component: testA
  },
  {
    path: '/testb',
    component: testB
  },
  {
    path: '/testc',
    component: testC
  }
]
const router = new VueRouter({
  routes,
  mode: 'history'
})

export default router

store文件夹下的index.js

import Vue from 'vue';
import Vuex from 'vuex'

Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  }
})
export default store;

找bug

一开始报错，百度了下，既然报错Object(…) is not a fuction，那肯定是那个函数或者啥写错拼错了，检查了一遍，就是没有错。

又有的文章说是import引入没有加{},我给全部加上了，报错

Cannot read properties of undefined (reading ‘use‘)

百思不得其解以为是创项目时使用的脚手架和语法有冲突，又重新创了几次项目。。。。

真正的原因是vue-router，vuex和vue的版本不匹配。

解决方法

卸载vue-router和vuex npm uninstall vue-router和npm uninstall vuex

安装匹配版本，我这里可以运行的版本是vue-router: “^3.5.2”, vuex: “^3.6.2”。

输入命令npm install vue-router@3.5.2和npm install vuex@3.6.2

当然不是重新安装就完事儿了，重点是再输入npm install

然后bug就完美解决啦~

附上版本

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解如何从零开始搭建Express+Vue开发环境
这篇文章主要介绍了详解如何从零开始搭建Express+Vue开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Vue axios库避免重复发送请求的示例介绍
Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。axios是目前最优秀的HTTP请求库之一,我们封装axios请求也是为了让代码看的更加清晰,后期好维护
2023-02-02
构建Vue3桌面应用程序的方法
在项目中会用到 Electron ，一种最流行的框架，可使用Javascript构建跨平台的桌面应用程序。在本文中，我们将研究如何通过 Vite 开发 Vue 3 桌面项目，感兴趣的可以了解一下
2021-05-05
详解vue中父子组件传递参数props的实现方式
这篇文章主要给大家介绍了在vue中，父子组件传递参数 props 实现方式，文章通过代码示例介绍的非常详细，对我们的学习或工作有一定的参考价值,需要的朋友可以参考下
2023-07-07
Vue-router路由该如何使用
这篇文章主要介绍了Vue-router路由该如何使用，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-03-03
vue项目中引入Sass实例方法
在本文里小编给大家整理的是关于vue项目中引入Sass的相关知识点内容，有需要的朋友们可以测试参考下。
2019-08-08
Vue2父子组件传值举例详解
这篇文章主要给大家介绍了关于Vue2父子组件传值的相关资料,Vue 2.0 中父子组件之间的传值可以通过属性(prop)和事件(event)实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
解决vue3使用element-ui的具体操作
elmentui是一款为vue设计的桌面组件库,下面这篇文章主要给大家介绍了关于解决vue3使用element-ui的具体操作,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
Vue中scrollIntoView()方法详解与实际运用举例
这篇文章主要给大家介绍了关于Vue中scrollIntoView()方法详解与实际运用举例的相关资料,该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域,需要的朋友可以参考下
2023-12-12
mpvue小程序仿qq左滑置顶删除组件
最近在做小程序开发的时候，遇到了点问题。最终选择用mpvue来做，谁知这么多坑，下面小编把我遇到的问题分享给大家，如果大家对mpvue小程序仿qq左滑置顶删除组件相关知识感兴趣的朋友一起看看吧
2018-08-08