Los archivos estáticos o las imágenes no se empaquetan correctamente cuando se usa Yarn Build para empaquetar el proyecto Vue.

Resuelva el problema de que los archivos estáticos o las imágenes no se empaquetan correctamente cuando el proyecto Vue se empaqueta con hilo de compilación

1. Verifique el archivo vue.config.js

vue.config.jsPrimero, debemos verificar el archivo en el directorio raíz del proyecto , que se utiliza para configurar las opciones de empaquetado y construcción del proyecto Vue. En este archivo, debemos confirmar si el directorio de salida del paquete y las reglas del archivo están configurados correctamente. Se pueden comprobar los siguientes ajustes:

module.exports = {
    
    
  // ...
  outputDir: 'dist', // 检查输出目录是否正确，可以尝试修改目录名
  assetsDir: 'static', // 检查静态资源的输出目录是否正确
  // ...
}

2. Verifique las referencias de la ruta del archivo

Al hacer referencia a archivos estáticos o imágenes en componentes de Vue, generalmente usamos rutas relativas para referirnos a ellos. Asegúrese de que las referencias de la ruta del archivo sean correctas y de que se pueda encontrar el archivo. Se recomienda utilizar rutas relativas al archivo del componente en lugar de rutas absolutas al hacer referencia. Por ejemplo:

<template>
  <div>
    <img src="./assets/img/logo.png" alt="Logo">
  </div>
</template>

3. Verifique el límite de tamaño del archivo

Webpack tiene una configuración de límite de tamaño de archivo predeterminada que no empaquetará archivos de más de cierto tamaño en el directorio de salida. Este límite se puede modificar a través del archivo de configuración. En vue.config.jsel archivo, se pueden verificar los siguientes elementos de configuración:

module.exports = {
    
    
  // ...
  configureWebpack: {
    
    
    performance: {
    
    
      maxAssetSize: 1000000, // 检查设置是否正确，例如将文件大小限制设为1MB
    },
  },
  // ...
}

4. Verifique la configuración del complemento

Si utiliza ciertos complementos de Webpack para procesar archivos estáticos o imágenes en su proyecto, estos complementos pueden causar fallas en el empaquetado. Asegúrese de que los complementos que está utilizando estén actualizados y sean compatibles con sus versiones actuales de Vue y Webpack.

5. El desarrollo de varias personas debe prestar atención al método de embalaje.

Si usa empaquetado de hilo en su proyecto y otros usan empaquetado npm, también habrá un problema de que la imagen no se empaquete correctamente.
La solucion es:

1. npm: elimine yarn.lockel archivo.
2. yarn: elimine package-lock.isonel archivo.