首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue创建项目使用vue-router和vuex报错Object(...)is not a function
解决vue创建项目使用vue-router和vuex报错Object(...)is not a function
作者：敲代码的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就完美解决啦~
附上版本
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。