AEM项目集成Vue3+TypeScript遇Webpack构建模块解析错误

错误核心是Webpack在/navigation目录下无法解析.这个路径——你在FlyoutNavigation.vue的script setup代码第3行写了类似import xxx from '.'的导入语句，但该目录下没有默认入口文件（比如index.ts/index.vue这类Webpack默认会查找的文件），导致找不到对应模块。

• 修正导入语句
  打开FlyoutNavigation.vue的script部分，定位到第3行的导入代码：

  • 如果是想导入同目录下的某个具体文件，直接写完整相对路径，比如import NavigationItem from './NavigationItem.ts'
  • 如果确实需要用.作为入口，就在/navigation目录下新建index.ts或index.vue，把要导出的内容放在这个文件里

• 检查Webpack扩展名配置
  打开Webpack配置文件，确保resolve.extensions包含.vue、.ts、.js，示例配置：

  module.exports = {
    resolve: {
      extensions: ['.vue', '.ts', '.js', '.json']
    }
  }
  

  这样Webpack会自动尝试这些扩展名，避免因漏写扩展名导致的解析失败。

• 验证Vue+TS的Webpack规则
  确保Webpack对Vue和TS的处理规则配置正确，示例：

  const VueLoaderPlugin = require('vue-loader/dist/plugin')
  
  module.exports = {
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        {
          test: /\.ts$/,
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/]
          }
        }
      ]
    },
    plugins: [
      new VueLoaderPlugin()
    ]
  }
  

  必须引入VueLoaderPlugin，否则vue-loader无法正常处理Vue组件的script部分。

• 确认TypeScript配置
  检查tsconfig.json，确保包含Vue文件的类型支持，示例：

  {
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "moduleResolution": "Node",
      "strict": true,
      "sourceMap": true,
      "esModuleInterop": true,
      "lib": ["ESNext", "DOM"]
    },
    "include": ["src/**/*.ts", "src/**/*.vue"]
  }
  

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