Storybook中导入别名（Aliases）失效问题求助

核心问题 #

你当前用的是@storybook/builder-vite（Vite构建器），但配置里写的是webpackFinal——这部分webpack相关的配置对Vite完全不生效，这就是别名失效的根本原因。

解决方案 #

步骤1：移除无效的webpackFinal配置 #

直接删掉main.js里的webpackFinal整个函数块，Vite构建器不会读取webpack的配置规则。

步骤2：安装Vite路径解析插件 #

安装vite-tsconfig-paths，让Vite自动读取tsconfig.json里的paths配置，不用手动重复写别名：

npm install vite-tsconfig-paths --save-dev
# 或者用yarn
yarn add vite-tsconfig-paths -D

步骤3：配置Storybook的Vite选项 #

在main.js里添加async viteFinal函数，集成插件并修正路径：

const path = require('path');
const tsconfigPaths = require('vite-tsconfig-paths').default;

module.exports = {
  stories: [
    "../packages/frontend/src/**/*.stories.mdx",
    "../packages/frontend/src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "storybook-react-i18next",
    "@storybook/addon-a11y",
    "@storybook/addon-postcss",
    "storybook-addon-sass-postcss"
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-vite"
  },
  features: {
    storyStoreV7: true
  },
  // 替换原webpackFinal为viteFinal
  async viteFinal(config) {
    // 集成tsconfig路径解析插件
    config.plugins.push(
      tsconfigPaths({
        projects: [path.resolve(__dirname, '../packages/frontend/tsconfig.json')]
      })
    );

    // 手动补充别名（可选，推荐用tsconfig的paths自动同步）
    config.resolve.alias = {
      ...config.resolve.alias,
      // 注意：不要用/开头，会指向系统根目录，要用相对路径结合__dirname
      '@public': path.resolve(__dirname, '../packages/frontend/public'),
      '@internals/components': path.resolve(__dirname, '../packages/frontend/src/components'),
      '@internals/features': path.resolve(__dirname, '../packages/frontend/src/features'),
      '@internals/hooks': path.resolve(__dirname, '../packages/frontend/src/hooks'),
      '@internals/models': path.resolve(__dirname, '../packages/frontend/src/models'),
      '@internals/utils': path.resolve(__dirname, '../packages/frontend/src/utils'),
      '@internals/types': path.resolve(__dirname, '../packages/frontend/src/types'),
      '@internals/styles': path.resolve(__dirname, '../packages/frontend/src/styles'),
      '@internals/assets': path.resolve(__dirname, '../packages/frontend/src/assets'),
      '@internals/store': path.resolve(__dirname, '../packages/frontend/src/store'),
      '@internals/config': path.resolve(__dirname, '../packages/frontend/src/config'),
      '@internals/services': path.resolve(__dirname, '../packages/frontend/src/services'),
    };

    // SCSS支持配置（Vite原生支持）
    config.css = {
      ...config.css,
      preprocessorOptions: {
        scss: {
          // 若有全局样式可在此引入
          // additionalData: `@import "@internals/styles/variables.scss";`
        }
      }
    };

    return config;
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'none',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

步骤4：重启Storybook #

停止当前服务后重新启动，别名即可正常工作。

额外说明 #

• 优先用vite-tsconfig-paths自动同步tsconfig的paths，避免手动维护两份配置，减少出错概率。
• Vite和webpack配置逻辑完全不同，用Vite构建器时，所有构建相关配置都要放在viteFinal里。

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