es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El archivo de Storybook no importa el archivo .vue correspondiente.

27 May, 2023 Programación

Resumen

Quiero importar el archivo vue(component/index.vue) en el archivo de Storybook(component/index.stories.ts).
Pero hay error de compilación y no se puede importar.

component/index.stories.ts

import Test from '~/components/test/index.vue' # <- error de compilación.

export default {
  title: 'Test'
}

export const TestWebsite = () => '<Test />'

Aquí está el directorio.

project
├ pages
│ └ index.vue
├ components
│ ├ test
│ │ ├ index.vue
. . └ index.stories.ts
. .

Quiero saber cómo resolver este error de compilación y ejecutar Storybook correctamente.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución:

    Puedes importar el archivo index.vue en tu archivo de Storybook usando el símbolo @ para representar el directorio src de tu proyecto.

    Primero, asegúrate de haber agregado el alias @ en tu configuración de Webpack.

    // webpack.config.js
const { join } = require('path')

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': join(__dirname, 'src')
    }
  }
}

    Luego, en tu archivo index.stories.ts, puedes importar el archivo index.vue usando el símbolo @:

    import Test from '@/components/test/index.vue'

export default {
  title: 'Test'
}

export const TestWebsite = () => '<test></test>'

    Esto debería resolver el error de compilación y permitirte ejecutar tu Storybook sin problemas.

Comments are closed.