Vue3项目中Storybook无法加载SVG组件问题求助

1. 恢复适配Vue3的SVG Loader配置 #

别用svg-inline-loader，Vue3项目更适配vue-svg-loader，直接扩展Storybook的webpack配置：

• 修改.storybook/main.js，调整webpack规则：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
  framework: '@storybook/vue3',
  webpackFinal: async (config) => {
    // 移除默认的SVG处理规则
    const fileLoaderRule = config.module.rules.find(rule => rule.test?.test('.svg'));
    fileLoaderRule.exclude = /\.svg$/;

    // 添加vue-svg-loader处理SVG为Vue组件
    config.module.rules.push({
      test: /\.svg$/,
      use: ['vue-loader', 'vue-svg-loader'],
    });

    return config;
  },
};

• 安装依赖：npm install vue-svg-loader vue-loader --save-dev

2. 清理无用的Babel配置 #

之前加的@babel-preset-react完全没必要，直接删掉：

• 执行卸载命令：npm uninstall @babel-preset-react
• 检查项目根目录或.storybook下的Babel配置文件，只保留Vue3需要的预设：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
};

3. 修复svg-inline-loader的适配问题（如果坚持用） #

如果替换后出现解析错误，是因为它输出的是纯HTML字符串，Vue3无法直接识别，要调整规则并修改导入方式：

• 调整webpack规则：

config.module.rules.push({
  test: /\.svg$/,
  loader: 'svg-inline-loader',
  options: {
    removeSVGTagAttrs: false,
  },
});

• 组件中导入时加后缀：import MyIcon from './my-icon.svg?inline'

4. 验证框架版本兼容性 #

确保.storybook/main.js的framework是@storybook/vue3，而非旧版@storybook/vue，同时更新依赖到稳定版：

• 执行更新：npm update @storybook/vue3 vue

5. 清理缓存重试 #

删除node_modules/.cache目录，或者执行npx storybook build --no-cache，再重新启动Storybook：npm run storybook

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