Vue CLI 5升级后如何禁止Webpack解析特定路径静态资源模块？

问题现象 #

将@vue/cli-service从4.5.15版本升级至5.0.6版本后，打包环节抛出错误：

Module not found: Error: Can't resolve '/assets/img/my-image.png' in 'C:\some-path-here\folder-name'

报错对应资源在MyComponent.vue中通过如下方式引用：

<style>
.my-component {
  background: url(/assets/img/my-image.png);
}
</style>

环境信息 #

项目依赖版本如下：

{
  "dependencies": {
    "vue": "^2.7.0"
  },
  "devDependencies": {
    "@vue/cli-service": "^5.0.6",
    "copy-webpack-plugin": "^11.0.0",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
    "vue-svg-loader": "^0.16.0"
  }
}

原因说明 #

• Vue CLI 5.0.6内置Webpack 5，默认会对样式中url()引用的静态资源做本地路径查找，上述路径对应的文件不存在于项目目录中，因此触发模块找不到错误
• Vue CLI 4.5.15内置Webpack 4，对根路径开头的静态资源引用默认不做本地解析，直接保留原始路径输出

需求目标：禁止Webpack解析图片、字体等静态资源引用，原样保留书写的路径，由浏览器直接按路径加载资源，支持按路径前缀、文件后缀配置忽略规则。

无效尝试说明 #

之前配置的webpack.IgnorePlugin未生效，原因是该插件仅作用于JS中import/require的模块引入场景，不会干预css-loader、Webpack内置资源规则对样式中url()路径的解析逻辑：

// 该配置无法生效
configureWebpack: {
    plugins: [
        new webpack.IgnorePlugin({
            resourceRegExp: /^\.(png|woff)$/
        })
    ]
}

可行解决方案 #

方案1：全局配置忽略规则（推荐） #

在项目根目录vue.config.js中添加配置，可按需求选择按后缀忽略、按路径前缀忽略两种模式：

模式1：按文件后缀全局忽略解析

通过chainWebpack修改Webpack默认的图片、字体资源解析规则，关闭对应后缀文件的解析逻辑，原样输出路径：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 关闭图片类资源解析
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
      .type('javascript/auto')
      .set('parser', {
        dataUrlCondition: () => false
      })
    // 关闭字体类资源解析
    config.module
      .rule('fonts')
      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/)
      .type('javascript/auto')
      .set('parser', {
        dataUrlCondition: () => false
      })
  }
}

模式2：按路径前缀忽略解析

如果仅需要忽略/assets开头的资源路径，不需要全局关闭静态资源解析，可通过css-loader配置过滤规则：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        url: (resourcePath) => {
          // 路径以/assets开头时返回false，跳过解析
          return !resourcePath.startsWith('/assets')
        }
      }
    }
  }
}

方案2：单资源标记跳过解析 #

如果仅少量资源需要跳过解析，不需要修改全局配置，可在路径前添加~@external前缀，Webpack识别到该前缀后会直接跳过解析，最终输出的路径仍为原始书写的路径：

.my-component {
  background: url(~@external/assets/img/my-image.png);
}

该写法最终编译输出的CSS中路径仍为/assets/img/my-image.png，不会做任何路径转换或本地查找。

内容的提问来源于stack exchange，提问作者Aleksandr