将 Vue3、Typescript 与 AEM 集成

Question

我尝试在 AEM 项目中将 Typescript 与 Vue3 集成，但没有按预期工作 当我构建时，我在终端中收到此错误

ERROR in ./src/main/webpack/components/navigation/FlyoutNavigation.vue?vue&type=script&setup=true&lang=ts (./node_modules/ts-loader/index.js!./node_modules/glob-import-loader/index.js??clonedRuleSet-1.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/main/webpack/components/navigation/FlyoutNavigation.vue?vue&type=script&setup=true&lang=ts) 3:9-21
Module not found: Error: Can't resolve '.' in '/Users/sayedsayed/Projects/codered/brandhub/bran/ui.frontend/src/main/webpack/components/navigation'
resolve '.' in '/Users/sayedsayed/Projects/codered/brandhub/bran/ui.frontend/src/main/webpack/components/navigation'
  using description file: /Users/sayedsayed/Projects/codered/brandhub/bran/ui.frontend/package.json (relative path: ./src/main/webpack/components/navigation)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/sayedsayed/Projects/codered/brandhub/bran/ui.frontend/package.json (relative path: ./src/main/webpack/components/navigation)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/sayedsayed/Projects/codered/brandhub/bran/ui.frontend/src/main/webpack/components/navigation is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/sayedsayed/Projects/codered/brandhub/bran/ui.frontend/src/main/webpack/components/navigation.js doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/sayedsayed/Projects/codered/brandhub/bran/ui.frontend/src/main/webpack/components/navigation.ts doesn't exist
      .vue
        Field 'browser' doesn't contain a valid alias configuration
        /Users/sayedsayed/Projects/codered/brandhub/bran/ui.frontend/src/main/webpack/components/navigation.vue doesn't exist
      as directory

尝试向 webpack 添加配置以使其与 typescript 一起使用，但在将 lang="ts" 添加到 vue 脚本时在控制台中出现此错误

Answer 1

将此属性添加到 webpack 配置规则中解决了我的问题

{
            loader: "ts-loader",
            options: {
              appendTsSuffixTo: [/\.vue$/],
            },
},