如何在规则中更改文件名？ （Vue CLI 5）

Posted 2023-02-23

【中文标题】如何在规则中更改文件名？ （Vue CLI 5）

【英文标题】：How to change filename inside a rule? (Vue CLI 5)

【发布时间】：2022-01-02 11:13:36

【问题描述】：

我有这个规则，使用vue inspect

      /* config.module.rule('svg') */
          
            test: /\.(svg)(\?.*)?$/,
            type: 'asset/resource',
            generator: 
              filename: 'img/[name][ext]'
            
          ,

我需要将文件名更改为“[contenthash][ext]” 但我无法使用

    module.exports = defineConfig(
    chainWebpack: (config) => 
    config.module.rule("svg").generator.filename = "[contenthash][ext]";
      ,
    ) 

因为我无法设置生成器，

我可以使用

重写所有规则

    module.exports = defineConfig(
    configureWebpack: (config) => 
    config.module.rules = [
          
            test: /\.(svg)(\?.*)?$/,
            use: [
              
                loader: "svg-inline-loader",
                options: 
                  name: "[contenthash].[ext]",
                ,
              ,
            ],
          ,
        ];
    ,
  )

但我需要其他规则存在...那么如何更改 svg 的文件名？

【问题讨论】：

这是（尚未发布）Vue CLI 5 吗？

是的，它是 Vue CLI 5

【参考方案1】：

试试这个：

chainWebpack: (config) => 
  config.module.rule("svg")
    .set('generator', 
      filename: "[contenthash][ext]"
    )

Source