Vue CLI 5 如何修改webpack内置svg规则的输出文件名配置

你之前直接给generator.filename赋值失败的核心原因是：chainWebpack 暴露的 config 对象是 webpack-chain 封装的链式操作实例，并非原生webpack配置对象，不能直接修改属性，需要调用实例提供的API完成配置修改。

正确修改方式（推荐，不影响其他原有规则） #

通过webpack-chain的.set()方法修改generator配置项：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  chainWebpack: (config) => {
    config.module
      .rule('svg') // 匹配已有的svg规则
      .generator // 进入generator配置节点
      .set('filename', '[contenthash][ext]') // 修改filename配置
  }
})

修改完成后可以执行vue inspect --rule svg命令验证配置是否生效，输出的规则中generator.filename会变成你设置的新值，其他原有规则完全保留不受影响。

可选：configureWebpack 原生配置修改方式 #

如果你更习惯用原生webpack配置写法，也可以通过查找匹配现有规则的方式修改，不需要重写整个rules数组：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  configureWebpack: (config) => {
    // 查找现有svg规则
    const svgRule = config.module.rules.find(rule => rule.test?.test('.svg'))
    if (svgRule && svgRule.generator) {
      svgRule.generator.filename = '[contenthash][ext]'
    }
  }
})

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