vue创建项目使用vue-router和vuex报错Object(...) is not a function
vue-cli3创建项目使用vue-router报错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-cli3中使用vue-router
真正的原因是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就完美解决啦~
附上版本:
更多推荐
所有评论(0)