前端 - 使用npm run dev打开一片空白？

Question

使用npm run dev打开一片空白
浏览器报错

Uncaught SyntaxError: The requested module '/src/router/index.js' does not provide an export named 'default'

代码为

import { createApp } from 'vue'import App from './App.vue'import router from './router'import * as ElementPlusIconsVue from '@element-plus/icons-vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import zhCn from 'element-plus/dist/locale/zh-cn.mjs'const app = createApp(App)for (const [key, component] of Object.entries(ElementPlusIconsVue)) {    app.component(key, component)}app.use(ElementPlus, {    locale: zhCn,})app.use(router).use(ElementPlus).mount('#app')

浏览器报错代码

import router from './router'

上百度查看说是格式错误，要去大括号，也就是报错代码哪里，但是我都没有啊

Answer 1

意思是你router那个文件 没有一个默认抛出 所以你检查一下你的router文件
两种情况 如果有export router （router是路由表） 那你把引入的地方换成import {router}

如果没有 写一个export default router 这样就有默认抛出了

Answer 2

贴出来你router/index代码啊

Answer 3

不要看百度，看错误提示。你的 /src/router/index.js（猜测是路由定义文件）没有暴露可供 import 的东西。所以你贴的项目入口代码并没有帮助。

Answer 4

浏览器报错提示 Uncaught SyntaxError: The requested module '/src/router/index.js' does not provide an export named 'default' 表明你尝试以默认导入（import router from './router'）的方式从 ./router/index.js 模块中导入 router，但是该模块并没有提供默认导出。

为了解决这个问题，你需要确认 ./router/index.js 文件中是如何导出 router 实例的。如果 router 是通过具名导出（named export）的方式导出的，那么你需要使用大括号来导入它。

假设 ./router/index.js 文件中的内容是这样的：

// 假设 router 是这样被导出的export const router = createRouter(/* ... */);

那么你应该在你的主文件中这样导入它：

// 使用具名导入，而不是默认导入import { router } from './router';

请检查 ./router/index.js 文件，看看 router 是如何被导出的，并相应地调整你的导入语句。如果 router 确实是默认导出的，那么问题可能出在 ./router/index.js 文件的导出语法上。确保你的导出语句类似于：

// 默认导出 routerexport default createRouter(/* ... */);

如果 router 使用了默认导出，而你的导入语句也使用了默认导入，但问题依旧存在，那么可能是构建或打包工具的配置问题。在这种情况下，你可能需要检查你的 webpack、Vite、Rollup 或其他模块打包器的配置，确保它支持 ES 模块语法，并且正确地处理了模块的导出和导入。

综上所述，修复这个问题通常涉及到以下几个步骤：

1. 检查 ./router/index.js 文件中 router 的导出方式（默认导出还是具名导出）。
2. 根据 router 的导出方式，调整主文件中的导入语句。
3. 如果导出和导入看起来都没问题，检查构建或打包工具的配置。