使用yarn build 打包vue项目时静态文件或图片未打包成功

分手后的思念是犯贱 2023-10-15 09:44 110阅读 0赞

### 解决Vue项目使用yarn build打包时静态文件或图片未打包成功的问题 ###

![在这里插入图片描述][bf8081cec9a14921822051170d02a404.png]

#### 1. 检查vue.config.js文件 ####

首先，我们需要检查项目根目录下的`vue.config.js`文件，该文件用于配置Vue项目的打包和构建选项。在这个文件中，我们需要确认是否正确地配置了打包输出目录和文件规则。可以检查以下几个设置项：

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

#### 2. 检查文件路径引用 ####

在Vue组件中引用静态文件或图片时，我们通常会使用相对路径来引用。请确保你的文件路径引用是正确的，并且能够找到文件。建议在引用时使用相对于组件文件的路径，而不是使用绝对路径。例如：

#### 3. 检查文件大小限制 ####

Webpack有一个默认的文件大小限制设置，即不会将大于某个大小的文件打包到输出目录中。这个限制可以通过配置文件进行修改。在`vue.config.js`文件中，可以检查以下设置项：

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

#### 4. 检查插件设置 ####

如果你在项目中使用了某些Webpack插件来处理静态文件或图片，这些插件可能会导致打包失败。请确保你所使用的插件是最新的，并且与你当前的Vue和Webpack版本兼容。

#### 5. 多人开发则需要注意打包方式 ####

如果你在项目中使用的是yarn打包，其他人使用的是npm打包，也是会出现图片未打包成功的问题。  
解决方法就是：

1.  `npm`：删掉`yarn.lock`文件。
2.  `yarn`：删掉`package-lock.ison`文件。

[bf8081cec9a14921822051170d02a404.png]: https://img-blog.csdnimg.cn/bf8081cec9a14921822051170d02a404.png