Typescript Storybook Vue类型脚本：未找到模块：错误：Can'；无法解决

我有一个Typescript Vue monorepo项目（纱线工作区），其中包括3个包：web、样式和组件。对于组件包，我想利用storybook进行可视化测试和独立开发

在web项目中导入组件时，组件工作正常，但在运行storybook时，出现以下错误：

Module not found: Error: Can't resolve './../components' in 'jdk-darts-frontend/packages/jdk-darts-components/.storybook'
 @ ./.storybook/config.ts 

storybook manager网页包配置似乎存在typescript/vue导入问题

故事书配置：

import Vue from 'vue';
import {addParameters, configure} from '@storybook/vue';
import {Button, Card, FinalInput, Icon, Input, Modal, Table} from './../components';

...

Vue.component('d-button', Button);
Vue.component('d-card', Card);
Vue.component('d-icon', Icon);
Vue.component('d-input', Input);
Vue.component('d-final-form-input', FinalInput);
Vue.component('d-modal', Modal);
Vue.component('d-table', Table);

function loadStories() {
  const req = require.context('../components', true, /\.stories\.ts$/);
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

故事书管理器网页包配置：

async function managerWebpack(config, options) {
  config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.scss', '.html');

  config.module.rules.push({
    test: /\.ts$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true,
        },
      },
    ],
  });

  config.resolve = {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.dirname(path.resolve(__dirname, "../components")),
    },
  };

  return config;
}

module.exports = {
  managerWebpack: managerWebpack,
};

故事书模板网页包配置

module.exports = async ({config}) => {
  config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.scss', '.html');

  config.module.rules.push({
    test: /\.ts$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true,
        },
      },
    ],
  });

    config.module.rules.push({
        test: /\.scss$/,
        use: [
            'vue-style-loader',
            'css-loader',
            {
                loader: 'sass-loader',
                options: {
          data: `@import "~jdk-darts-styles/scss/index.scss";`,
          implementation: require('sass'),
        },
      },
        ],
    });

    config.resolve = {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
      '@': path.dirname(path.resolve(__dirname, "../src")),
    },
    };

    return config;
};

组件是使用多个index.ts文件导入的

---

GIT Repository:

您是否尝试过删除您的

node\u modules

文件夹，并运行

warn cache clean

，然后重新安装软件包（

warn

）？还可能更新您的依赖项吗？我以前也有过类似的问题，在上游得到了修复，但由于缓存的原因没有被导入。（虽然不是在vue中）是的，这看起来像是我根声明的Tconfig问题。