无法在 Storybook 中使用 @ 解析 Vue 组件

Question

我已经设置了一个新的 vue 项目并向该项目添加了故事书。当我有使用 @/components 路径的组件时，它不会运行正确。

Can't resolve '@/components/EntityGrid/EntityGrid.Component.vue'

我尝试了多次 webpack.config.js，但都没有成功。什么是最简单的webpack.config.js来解决这个问题

这是在没有 webpack.config.js 的默认配置中发生的。

Answer 1

我不知道你的问题是什么原因，但这是我的工作 vue.config.js

const path = require('path')

module.exports = {
    chainWebpack: config => {
        config.module
            .rule("i18n")
            .resourceQuery(/blockType=i18n/)
            .type('javascript/auto')
            .use("i18n")
            .loader("@kazupon/vue-i18n-loader")
            .end();
    },
    configureWebpack: {
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                '@': path.join(__dirname, '/src')
            }
        },
        module: {
            rules: [
                {
                    test: /\.(graphql|gql)$/,
                    exclude: /node_modules/,
                    loader: 'graphql-tag/loader',
                },
            ]
        },
    },
    css: {
        loaderOptions: {
            sass: {
                data: `@import "@/assets/sass/_variables.scss"; @import "@/assets/sass/_mixins.scss";`,
            }
        }
    }
}

忽略所有你不需要的东西

Answer 2

我通过在 .storybook/main.js

中添加以下内容设法解决了这个问题

const path = require("path");

module.exports = {
  stories: ['./../src/**/*.stories.(js|jsx|ts|tsx|mdx)'],
  ...
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@": path.resolve(__dirname, "../src/"),
    };
    // keep this if you're doing typescript
    // config.resolve.extensions.push(".ts", ".tsx");
    return config;
  },
}

以下是一些有用的链接，可帮助提供更多背景信息：

StoryBook docs for webpackFinal - 为您提供有关如何配置 webpack 配置的第一条线索
然后this solution Github 中的一个问题提供了最后一块拼图

无法在 Storybook 中使用 @ 解析 Vue 组件

Can't Resolve Vue Components with @ in Storybook

vue.js

storybook