vue3+cli4运行项目报错export ‘default‘ (imported as ‘VueRouter‘) was not found in ‘vue-router‘

原创已于 2023-02-22 10:14:58 修改 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vue3+router4 #vue+webpack5

于 2023-02-22 10:10:23 首次发布

vue 专栏收录该内容

42 篇文章

订阅专栏

文章主要讲述了在Vue3+CLI4环境下遇到exportdefault(importedasVueRouter)wasnotfoundinvue-router的错误，以及如何通过使用vue3、webpack5和router4的正确配置来解决这个问题。在main.js中，应使用createApp和VueRouter的新语法，并在index.js中正确导出路由器。

vue3+cli4运行项目报错export 'default' (imported as 'VueRouter') was not found in 'vue-router'

1、解决方案：

cli3和cli4在使用时语法上是不一样的

vue3+webpack5+router4 （从0创建一个项目可查看文章： vue3+webpack5从0创建一个项目)

main.js

// main.js

import { createApp } from 'vue'; // 
import App from './App.vue'

import router from './router'

createApp(App).config.productionTip = false

createApp(App).use(router).mount('#app')

router --> index.js

import {createRouter, createWebHistory} from 'vue-router'

const routes = [
    {
        path: '/',
        name: 'DemoIndex',
        component: () => import('../../src/pages/demo-index.vue'),
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes,
})

export default router

vue2举例如下，可对比vue3的 router4的写法

// main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

// router - index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})