在Vue Storybook中导入错误的路径

Question

我是Vue的新手，在使用别名导入文件时遇到了一个关于Vue和Storybook的问题：

我有一个SvgIcon组件：

<template>
<div>
props from the icon: {{this.$props}}
<svg v-if="icon" class="svg-icon">
<title v-if="title">{{ title }}</title>
<use v-bind="{ 'xmlns:xlink':'http://www.w3.org/1999/xlink', 'xlink:href': icon }"></use>
</svg>
<img v-else-if="image" :src="image" class="image-icon"/>
</div>
</template>
<script>
export default {
name: 'SvgIcon',
data: function() {
return {
icon: null,
image: null
}
},
props: {
title: {
type: String,
default: ''
},
iconFallback: {
type: String,
required: false
},
iconId: {
type: String,
required: true,
validator(iconName) {
if (!iconName) {
console.warn('icon can not be empty')
return false
}
return true
}
}
},
watch: {
iconId: {
immediate: true,
handler(iconId) {
iconId && import(`@/assets/icons/${iconId}.svg`)
.then(svg => {
// debugger
console.log(this, 'this from SvgIcon')
if (Object.prototype.hasOwnProperty.call(svg, 'default')) {
this.icon = svg.default
} else {
this.icon = svg
}
}).catch(() => {
this.image = this.iconFallback && require(`@/assets/icons/${this.iconFallback}.png`)
})
}
}
}
}
</script>
<style scoped lang="scss">
svg {
width: 32px;
height: 32px;
vertical-align: middle;
&.icon-status {
width: 14px;
height: 14px;
min-width: 14px;
transform: translateY(-6%);
fill: $light-orange;
}
&.icon-size-small {
width: 14px;
height: 14px;
}
&.icon-size-medium {
width: 18px;
height: 18px;
}
@include only_mini {
@include skip_element;
}
}
</style>

正如您所看到的，它正在使用@别名导入另一个组件：

import(`@/assets/icons/${iconId}.svg`)

当查看应用程序时，这在localhost:3000中运行良好，但对于Storybook(在6006端口上运行(，它会给出以下错误：

ERROR in ./src/js/globalComponents/SvgIcon.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/js/globalComponents/SvgIcon.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '@/assets/icons' in 'src/js/globalComponents'
ERROR in ./src/js/globalComponents/SvgIcon.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/js/globalComponents/SvgIcon.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '@/assets/icons' in 'src/js/globalComponents'

vue.config.js内部(根目录中(是应用别名的位置：

configureWebpack: {
resolve: {
alias: require('./aliases.config').webpack
},
...
}

以及它引用的文件：./aliases.config:

const path = require('path')
function resolveSrc(_path) {
return path.join(__dirname, _path)
}
const aliases = {
'@': 'src',
'@src': 'src'
}
module.exports = {
webpack: {},
jest: {}
}
for (const alias in aliases) {
module.exports.webpack[alias] = resolveSrc(aliases[alias])
module.exports.jest['^' + alias + '/(.*)$'] =
'<rootDir>/' + aliases[alias] + '/$1'
}

这是我的Storybook(.storybook/main.js(配置：

const path = require('path');
module.exports = {
stories: ['../stories/**/*.stories.js'],
addons: ['@storybook/addon-actions', '@storybook/addon-links'],
webpackFinal: async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /.scss$/,
use: ['style-loader', 'css-loader', 
{
loader: 'sass-loader',
options: {
prependData: `@import "src/project/test/vars.scss"; @import "src/project/common/mixins.scss"; @import "src/styles/styles.scss";`
}
}
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.dirname(path.resolve(__dirname, "../src")),
},
},
include: path.resolve(__dirname, '../'),
});

// Return the altered config
return config;
},
};

有人看到我在这里做错了什么吗？

Answer 1

我在更新到Storybook 5.3.19时遇到了同样的问题。我可以通过使用来解决导入错误

'@': path.resolve(__dirname, '../src'),

我认为不需要使用path.dirname((进行嵌套。

这是故事书的.storybook/main.js：

module.exports = {
stories: ['../stories/**/*.stories.js'],
addons: ['@storybook/addon-actions', '@storybook/addon-links'],
webpackFinal: async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
// Use Sass loader for vuetify components
config.module.rules.push({
test: /.s(a|c)ss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
config.module.rules.push({
resolve: {
alias: {
'@': path.resolve(__dirname, '../src'),
vue: 'vue/dist/vue.js',
'vue$': 'vue/dist/vue.esm.js',  
},
},
});
return config;
},
};