Question

在今天早上更新VueJS之前，我的应用一直可以正常工作。现在，当我构建时，它显示以下错误：

Error: Conflict: Multiple assets emit to the same filename img/default-contractor-logo.0346290f.svg

回购中只有一个这样的文件。

这是我的vue.config.js：

module.exports = {
  baseUrl: '/my/',
  outputDir: 'dist/my',
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/_variables.scss";
          @import "@/scss/_mixins.scss";
          @import "@/scss/_fonts.scss";
        `
      }
    }
  },
  devServer: {
    disableHostCheck: true
  }
};

我尝试了在类似情况下推荐的Webpack修复程序，但没有帮助。

Answer 1

在require语句中使用动态生成的路径导入SVG文件时，我遇到了相同的错误：

const url = require("../assets/svg/#{value}");
<img src={{url}} />

在这种情况下，file-loader处理所有SVG文件并将其保存到输出路径。我的file-loader选项是：

{
    loader: "file-loader",
    options: { name: "[name].[ext]" }
}

文件夹结构具有重复的文件名，如下所示：

assets
|__ one
|____ file.svg
|__ two
|____ file.svg

在这种情况下，file-loader将两个file.svg文件保存到同一输出文件：build/assets/file.svg-因此发出警告。

我设法通过在[path]选项中添加name来解决此问题：

{
    loader: "file-loader",
    options: { name: "[path][name].[ext]" }
}

Answer 2

@ischenkodv 的回答绝对是正确的，但由于我对 webpack 缺乏经验，我需要更多的上下文来使用这些信息来解决问题。

为了让处于相同情况的其他人受益，我将添加以下详细信息，希望对您有所帮助。

Vue.js 文档的这一部分特别有用：

VueJS - Modifying Options of a Loader

对于 TL;DR 修复，这里是我的 vue.config.js 的相关部分：

// vue.config.js
module.exports = {
    // ---snip---
    chainWebpack: config =>
    {
        config.module
            .rule('svg')
            .test(/\.svg$/)
            .use('file-loader')
            .tap(options =>
            {
                return { name: "[path][name].[ext]" };
            });
    }
    // ---snip---
};

在我的项目中，是 flag-icon-css NPM package 导致了 Multiple assets emit to the same filename 冲突错误。对 vue.config.js 文件的上述更新为我解决了这个问题。

我怀疑可以收紧 test 中的正则表达式以仅针对 flag-icon-css 包中的项目而不是匹配所有 SVG 文件，但我没有不用担心，因为到目前为止它没有造成任何不利影响。

VueJS构建开始引发错误：冲突：多个资产发出相同的文件名

2 个答案: