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
    }
  ]
})
Logo

前往低代码交流专区

更多推荐