为什么会出现错误 - 未捕获的语法错误：请求的模块'/src/router/index.js'在main.js vue中没有提供名为'default'的导出？

Question

在 vite vue 运行时出现错误 - 为什么会出现错误 - Uncaught SyntaxError: The requested module '/src/router/index.js' does notprovid an Export Named 'default' at main.js vue ？怎么了？

https://stackblitz.com/edit/vue3-vite-starter-ywq59j?file=package.json,src%2Fcomponents%2FFooter.vue,src%2Fcomponents%2FHeader.vue,src%2Fcomponents%2FMain.vue, src%2Fcomponents%2FNotMain.vue,src%2Fviews%2FHome.vue,src%2Fviews%2FShops.vue,src%2FApp.vue,src%2Fmain.js,public%2Ffavicon.ico

    // main.js

    import { createApp } from 'vue'
    import 'bootstrap/dist/css/bootstrap.css'
    import 'bootstrap/dist/js/bootstrap.js'
    import App from './App.vue'
    import router from './router'

    const app = createApp(App)

    app.use(router)

    app.mount('#app')

// router index.js

import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Shops from '../views/Shops.vue';
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/shops',
      name: 'Shops',
      component: Shops,
    },
  ],
});

export default router;

Answer 1

您必须按照以下方式声明路由器并从路由器文件（src/router/index.js）中导出。

import { createRouter, createWebHistory } from "vue-router";
const routers={
{path:'/',name:'NameOfTheComponent',component:()=>import('pathof the component')
}

const router=createRouter({history:createWebHistory(),routers});
export default router;

如您所见，最后一行将定义的路由器文件导出到您要导入的组件并将其用作路由器。

Answer 2

您可以分享

/src/router/index.js

代码吗？我在您通过 stackblitz 共享的代码中看到的是 router 文件夹内的 index.js 是空的。

请在router/index.js中添加导出，例如参考下面

export default expression;
export default function functionName() { /* … */ }
export default class ClassName { /* … */ }
export default function* generatorFunctionName() { /* … */ }
export default function () { /* … */ }
export default class { /* … */ }
export default function* () { /* … */ }

这些是您可以使用的所有导出默认类型。 请参阅 MDN 文档以了解有关如何使用导出的更多信息 https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

编辑解决方案：

import * as VueRouter from 'vue-router';

在 router/index.js 中更新它，它应该可以工作。出现此错误是因为 vue-router 有命名导出而不是默认导出

Answer 3

我想你忘了放

export default router;

在路由器代码的末尾。