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

附上版本

总结

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

您可能感兴趣的文章:

在vue-cli脚手架中配置一个vue-router前端路由
这篇文章主要给大家介绍了在vue-cli脚手架中配置一个vue-router前端路由的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
2017-07-07
vue3+Element Plus v-model实现父子组件数据同步的案例代码
这篇文章主要介绍了vue3+Element Plus v-model实现父子组件数据同步,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2024-01-01
vue时间转换的几种方式
这篇文章主要介绍了vue时间转换的几种方式,需要的朋友可以参考下
2022-05-05
Vue实例创建和挂载的详细过程
在 Vue.js 中,实例的挂载是一个非常重要的过程,它决定了 Vue 实例如何与 DOM 进行交互,通过分析 Vue 源码,特别是 Vue 的构建函数和生命周期,我们可以了解挂载过程的详细步骤,需要的朋友可以参考下
2024-11-11
vue框架和react框架的区别以及各自的应用场景使用
这篇文章主要介绍了vue框架和react框架的区别以及各自的应用场景使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
安装vue/cli后查看版本显示找不到vue指令的解决
这篇文章主要介绍了安装vue/cli后查看版本显示找不到vue指令的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue3中cookie的详细使用过程
近期做的项目比较杂,涉及到前端框架的工作,遇到了许多问题,记录一下这个比较棘手的问题,下面这篇文章主要给大家介绍了关于vue3中cookie的详细使用方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
vue-electron使用serialport时问题解决方案
这篇文章主要介绍了vue-electron使用serialport时问题解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
vue实现输入框自动跳转功能
这篇文章主要为大家详细介绍了vue实现输入框自动跳转功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
uniapp-ios开发之App端与webview端相互通信的方法以及注意事项
在uni-app与Webview之间进行数据交互是非常常见的需求,下面这篇文章主要给大家介绍了关于uniapp-ios开发之App端与webview端相互通信的方法以及注意事项的相关资料,需要的朋友可以参考下
2024-07-07