解決vue創(chuàng)建項(xiàng)目使用vue-router和vuex報(bào)錯(cuò)Object(...)is not a function
vue創(chuàng)建項(xiàng)目使用vue-router和vuex報(bào)錯(cuò)Object(...)is not a function
之前創(chuàng)建項(xiàng)目使用還好好的，這次想新建個(gè)項(xiàng)目練練手，才用了vue-router就報(bào)錯(cuò)了，記錄下自己修改了一個(gè)下午的bug,淚目了（其實(shí)是版本問題，小小劇透）
報(bào)錯(cuò)：
Object(...) is not a fuction
創(chuàng)建項(xiàng)目時(shí)用的是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.創(chuàng)建路由對(duì)象
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
一開始報(bào)錯(cuò)，百度了下，既然報(bào)錯(cuò)Object(…) is not a fuction，那肯定是那個(gè)函數(shù)或者啥寫錯(cuò)拼錯(cuò)了，檢查了一遍，就是沒有錯(cuò)。
又有的文章說是import引入沒有加{},我給全部加上了，報(bào)錯(cuò)
Cannot read properties of undefined (reading ‘use‘)
百思不得其解以為是創(chuàng)項(xiàng)目時(shí)使用的腳手架和語法有沖突，又重新創(chuàng)了幾次項(xiàng)目。。。。
真正的原因是vue-router，vuex和vue的版本不匹配。
解決方法
卸載vue-router和vuex npm uninstall vue-router和npm uninstall vuex
安裝匹配版本，我這里可以運(yùn)行的版本是vue-router: “^3.5.2”, vuex: “^3.6.2”。
輸入命令npm install vue-router@3.5.2和npm install vuex@3.6.2
當(dāng)然不是重新安裝就完事兒了，重點(diǎn)是再輸入npm install
然后bug就完美解決啦~
附上版本
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue-cli腳手架中配置一個(gè)vue-router前端路由
這篇文章主要給大家介紹了在vue-cli腳手架中配置一個(gè)vue-router前端路由的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
vue3+Element?Plus?v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步的案例代碼
這篇文章主要介紹了vue3+Element?Plus?v-model實(shí)現(xiàn)父子組件數(shù)據(jù)同步,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue時(shí)間轉(zhuǎn)換的幾種方式,需要的朋友可以參考下2022-05-05
Vue實(shí)例創(chuàng)建和掛載的詳細(xì)過程
在 Vue.js 中,實(shí)例的掛載是一個(gè)非常重要的過程,它決定了 Vue 實(shí)例如何與 DOM 進(jìn)行交互,通過分析 Vue 源碼,特別是 Vue 的構(gòu)建函數(shù)和生命周期,我們可以了解掛載過程的詳細(xì)步驟,需要的朋友可以參考下2024-11-11
vue框架和react框架的區(qū)別以及各自的應(yīng)用場(chǎng)景使用
這篇文章主要介紹了vue框架和react框架的區(qū)別以及各自的應(yīng)用場(chǎng)景使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了安裝vue/cli后查看版本顯示找不到vue指令的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
近期做的項(xiàng)目比較雜,涉及到前端框架的工作,遇到了許多問題,記錄一下這個(gè)比較棘手的問題,下面這篇文章主要給大家介紹了關(guān)于vue3中cookie的詳細(xì)使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue-electron使用serialport時(shí)問題解決方案
這篇文章主要介紹了vue-electron使用serialport時(shí)問題解決方案,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue實(shí)現(xiàn)輸入框自動(dòng)跳轉(zhuǎn)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)輸入框自動(dòng)跳轉(zhuǎn)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)
在uni-app與Webview之間進(jìn)行數(shù)據(jù)交互是非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-07-07