使用带有 Quasar 的 MonacoEditor 组件时如何解决“冲突：多个资产将不同的内容发送到相同的文件名 fonts/codicon.ttf”

Question

在 Quasar Framework 项目中，我在 quasar.conf.js 中有以下内容（类似于此处自述文件中的描述）：

const MonacoEditorPlugin = require("monaco-editor-webpack-plugin");

module.exports = function (/* ctx */) {
  return {
build: {
      chainWebpack(chain) {
        chain
          .plugin("monaco-editor-webpack-plugin")
          .use(MonacoEditorPlugin);
      },
[...]

在 Index.vue 我有：

import MonacoEditor from 'vue-monaco';

export default {
  components: {
    MonacoEditor,
[...]

这曾经适用于 Quasar Framework v1，但不再适用于 v2。

尝试将应用程序作为 Electron 应用程序运行时出现以下错误（ quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox ）：

Conflict: Multiple assets emit different content to the same filename fonts/codicon.ttf

如何解决这个错误？ 如果这是相同的内容，webpack 可以检测到它，所以它只捆绑一次？ 并且（如果不是）应该指定一个输出路径（如何）？

Answer 1

作为一种解决方法，该问题应通过以下方式解决：

build: {
//...

chainWebpack(chain) {
  chain.module
  .rule('fonts')
  .use('url-loader')
  .tap((options) => {
  options.name = `fonts/[path][name][hash:8].[ext]`
  return options
  })
},

//...
}

如果这个 PR被合并并发布，你应该不需要解决方法。