使用 Storybook/vue 时别名不起作用

Posted 2023-02-19

【中文标题】使用 Storybook/vue 时别名不起作用

【英文标题】：aliases not working while using Storybook/vue

【发布时间】：2020-06-29 12:24:16

【问题描述】：

我正在为 Vue 使用 Storybook，我正在尝试将别名添加到 storybook/main.js 中的 webpack 配置：

  resolve: 
    alias: 
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src'),
        '@': 'src',
      '@src': 'src'
    ,
    extensions: ['*', '.js', '.vue', '.json']
  ,

这是我的文件结构的样子：

我得到的错误是：

npm run storybook
    > scss-loader-example@0.1.0 storybook /Users/test/Documents/webdev/test/scss-loader-example
    > start-storybook -p 6006

    info @storybook/vue v5.3.17
    info
    info => Loading presets
    info => Loading presets
    info => Adding stories defined in ".storybook/main.js".
    info => Using default Webpack setup.
    webpack built c29ceda255d3976f13b9 in 9398ms
    ✖ ｢wdm｣: Hash: c29ceda255d3976f13b9
    Version: webpack 4.42.0
    Time: 9398ms
    Built at: 2020-03-18 11:41:13
                                              Asset      Size        Chunks                                Chunk Names
                                        iframe.html  2.87 KiB                [emitted]
                main.c29ceda255d3976f13b9.bundle.js   321 KiB          main  [emitted] [immutable]  [big]  main
            main.c29ceda255d3976f13b9.bundle.js.map   213 KiB          main  [emitted] [dev]               main
        runtime~main.c29ceda255d3976f13b9.bundle.js  31.2 KiB  runtime~main  [emitted] [immutable]         runtime~main
    runtime~main.c29ceda255d3976f13b9.bundle.js.map  32.3 KiB  runtime~main  [emitted] [dev]               runtime~main
        vendors~main.c29ceda255d3976f13b9.bundle.js  2.68 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
    vendors~main.c29ceda255d3976f13b9.bundle.js.map  2.79 MiB  vendors~main  [emitted] [dev]               vendors~main
    Entrypoint main [big] = runtime~main.c29ceda255d3976f13b9.bundle.js runtime~main.c29ceda255d3976f13b9.bundle.js.map vendors~main.c29ceda255d3976f13b9.bundle.js vendors~main.c29ceda255d3976f13b9.bundle.js.map main.c29ceda255d3976f13b9.bundle.js main.c29ceda255d3976f13b9.bundle.js.map
    [0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true 64 bytes main [built]
    [./.storybook/generated-entry.js] 230 bytes main [built]
    [./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes vendors~main [built]
    [./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes vendors~main [built]
    [./node_modules/@storybook/vue/dist/client/index.js] 1.21 KiB vendors~main [built]
    [./node_modules/airbnb-js-shims/index.js] 40 bytes vendors~main [built]
    [./node_modules/core-js/features/symbol/index.js] 359 bytes vendors~main [built]
    [./node_modules/global/window.js] 232 bytes vendors~main [built]
    [./node_modules/querystring-es3/index.js] 127 bytes vendors~main [built]
    [./node_modules/regenerator-runtime/runtime.js] 23.6 KiB vendors~main [built]
    [./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.17 KiB vendors~main [built]
    [./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] (webpack)-hot-middleware/client.js?reload=true&quiet=true 7.68 KiB vendors~main [built]
    [./node_modules/webpack-hot-middleware/node_modules/strip-ansi/index.js] (webpack)-hot-middleware/node_modules/strip-ansi/index.js 161 bytes vendors~main [built]
    [./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.35 KiB vendors~main [built]
    [./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes vendors~main [built]
        + 708 hidden modules

    ERROR in ./src/components/Balance.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Balance.vue?vue&type=script&lang=js&)
    Module not found: Error: Can't resolve '@/js/automation-const' in '/Users/test/Documents/webdev/test/scss-loader-example/src/components'
     @ ./src/components/Balance.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Balance.vue?vue&type=script&lang=js&) 27:0-56 53:13-32
     @ ./src/components/Balance.vue?vue&type=script&lang=js&
     @ ./src/components/Balance.vue
     @ ./stories/1-Button.stories.js
     @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
     @ ./.storybook/generated-entry.js
     @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

    ERROR in ./src/components/Balance.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Balance.vue?vue&type=script&lang=js&)
    Module not found: Error: Can't resolve '@/js/utils/helper' in '/Users/test/Documents/webdev/test/scss-loader-example/src/components'
     @ ./src/components/Balance.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Balance.vue?vue&type=script&lang=js&) 26:0-39 57:19-25
     @ ./src/components/Balance.vue?vue&type=script&lang=js&
     @ ./src/components/Balance.vue
     @ ./stories/1-Button.stories.js
     @ ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^\/]*?\.stories\.js\/?)$
     @ ./.storybook/generated-entry.js
     @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
    Child HtmlWebpackCompiler:
                              Asset     Size               Chunks  Chunk Names
        __child-HtmlWebpackPlugin_0  6.5 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
        Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
        [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2.15 KiB HtmlWebpackPlugin_0 [built]

    WARN Broken build, fix the error above.
    WARN You may need to refresh the browser.

以及导致问题的Balance.vue 内部的路径：

import helper from '@/js/utils/helper'
import automationConstants from '@/js/automation-const'

任何想法我做错了什么？

【问题讨论】：

使用默认的 Webpack 设置 - 这就是问题所在。 main.js 中的 webpack 配置条目到底在哪里？文档明确说他们应该在 webpackFinal，storybook.js.org/docs/configurations/custom-webpack-config

我遇到了同样的问题。我正在考虑不使用 @ 别名，这将是一种耻辱。

【参考方案1】：

我在.storybook 文件夹中创建了一个单独的webpack.config.js 文件并使用了以下配置。

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

一定要加上vue$，否则vue编译器会坏掉。