解决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就完美解决啦~

附上版本

总结

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

您可能感兴趣的文章:

element-ui使用el-date-picker日期组件常见场景分析
最近一直在使用 element-ui中的日期组件,所以想对日期组件常用的做一个简单的总结,对element-ui el-date-picker日期组件使用场景分析感兴趣的朋友一起看看吧
2024-05-05
vue之nextTick全面解析
本篇文章主要介绍了vue之nextTick全面解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
vue3.0实践之写tsx语法实例
很久不写博客了,最近在使用ts和tsx开发vue类项目,网上资料比较少,顺便记录一下方便同样开发的人互相学习共同进步,下面这篇文章主要给大家介绍了关于vue3.0实践之写tsx语法的相关资料,需要的朋友可以参考下
2022-07-07
vue3.x 的shallowReactive 与 shallowRef 使用场景分析
在Vue3.x中,`shallowReactive`和`shallowRef`是用于创建浅层响应式数据的API,它们与`reactive`和`ref`类似,本文介绍vue3.x shallowReactive 与 shallowRef的使用场景,感兴趣的朋友一起看看吧
2025-02-02
vue简单实现一个虚拟列表的示例代码
虚拟列表只渲染当前可视区域的列表,并不会将所有的数据渲染,本文主要介绍了vue简单实现一个虚拟列表的示例代码,具有一定的参考价值,感兴趣的可以了解一下
2024-03-03
自定义Vue中的v-module双向绑定的实现
这篇文章主要介绍了自定义Vue中的v-module双向绑定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
VUE表格显示错位的两种解决思路分享
这篇文章主要介绍了VUE表格显示错位的两种解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue from-validate 表单验证的示例代码
本篇文章主要介绍了Vue from-validate 表单验证的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue-cli3使用 DllPlugin 实现预编译提升构建速度
这篇文章主要介绍了vue-cli3使用 DllPlugin 实现预编译提升构建速度 ,需要的朋友可以参考下
2019-04-04
超详细的vue组件间通信总结
作为一个vue初学者不得不了解的就是组件间的数据通信(暂且不谈vuex),通信方式根据组件之间的关系有不同之处,这篇文章主要给大家介绍了关于vue组件间通信的相关资料,需要的朋友可以参考下
2021-07-07