Vue 2.7子组件报错：Uncaught SyntaxError: import not found: default

以下是具体排查和解决方向：

1. 确认子组件文件扩展名 #

必须保证子组件文件以.vue为后缀，而非.js或其他格式。Vue单文件组件依赖.vue扩展名让打包工具正确解析模板、脚本的组合结构。

2. 修正子组件的data写法 #

你当前子组件的data()是空函数，Vue 2中规范写法需要返回一个对象，空对象也可，避免潜在解析异常：

<script>
export default {
  data() {
    return {}
  }
}
</script>

3. 校验组件引用路径 #

IDE能跳转不代表运行时路径完全正确：

• 相对路径要加正确前缀，比如import MyNewComponent from './MyNewComponent.vue'（当前目录）或../（上级目录）
• 若用了路径别名，需确认项目的Webpack/Vite配置中别名映射是否准确指向目标目录

4. 检查打包工具插件版本 #

Vue 2.7对打包工具有版本要求：

• 用Vite的话，确保@vitejs/plugin-vue2插件版本适配Vue 2.7
• 用Webpack的话，确认vue-loader版本符合Vue 2.7的兼容要求

5. 清理缓存重启服务 #

开发缓存可能导致解析异常，尝试：

• 清除浏览器缓存
• 停止开发服务，删除node_modules/.cache（Webpack）或node_modules/.vite（Vite）目录
• 重新启动开发服务

内容的提问来源于stack exchange，提问作者rovac