我尝试在 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 脚本时在控制台中出现此错误
将此属性添加到 webpack 配置规则中解决了我的问题
{
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/],
},
},