In the project built by @vue/cli 5.0.8, the problem of modifying filename such as images and fonts.

[2356874721]

In the project built with vue-cli 5.x version, the corresponding webpack 5.x version is used. For the static resources produced by the build, such as: js, css, image, fonts, etc., we do not need to do too much configuration. , cli has already configured it for us. If we want to modify the default configuration, cli is also supported.
使用vue-cli 5.x版本搭建的项目中，对应使用的是webpack 5.x版本，对于构建产出的静态资源，例如：js、css、image、fonts等等不需要我们做过多的配置，cli已经帮我们配置好了。如果我们想修改默认的配置，cli也是支持的。

For example, in my team, we are not used to the default naming method, like this: about.04f11358.js, we are more accustomed to putting the hash value at the end, like this: about.js?t=04f11358. The code can look like this:
比如在我的团队中，不太习惯默认的命名方式，像这样：about.04f11358.js，我们更习惯于把hash值放到最后，像这样：
about.js?t=04f11358。代码可以像下面这样：

...
module.exports = defineConfig({
chainWebpack: (config) => {
...
config.output
.filename("js/[name].js?t=[hash:7]")
.chunkFilename("js/[name].js?t=[hash:7]");
...
}
})
However, in webpack5, for the processing of resources such as images and fonts, url-loader, file-loader, etc. are no longer used, but built-in assets are used. How should I modify their filenames?
但是在webpack5中对于图片、字体等资源的处理，不再使用url-loader、file-loader等等，而是使用内置的asset，我应该如何修改它们的filename呢？

[screetBloom]

// vue.config.js
module.exports = {
  chainWebpack(config => {
    config.module
      .rule('svg')
      .set('generator', {
        filename: 'demo'
      })
  })
}

[2356874721]

Thank you. The code I finally implemented is as follows, which is the same as the code you provided.

module: {
rules: [
{
test: /.(png|jpe?g|gif|webp|avif|svg)(?.*)?$/,
type: "asset",
generator: {
filename: "img/[name][ext]?t=[hash:7]",
},
parser: {
dataUrlCondition: {
maxSize: 10 * 1024,
},
},
},
......
],
},