如何修改Vue.js中filenameHashing的文件名模板仅保留contentHash和后缀

你之前的配置仅覆盖了入口JS文件的命名规则，未覆盖路由懒加载生成的异步chunk，以及CSS资源的命名规则，所以会出现不生效的情况，按以下方式修改vue.config.js即可：

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

module.exports = defineConfig({
  // 关闭默认的哈希命名规则，使用自定义规则
  filenameHashing: false,
  configureWebpack: {
    output: {
      // 入口JS文件命名规则
      filename: '[contenthash].js',
      // 异步JS chunk（路由懒加载页面）命名规则
      chunkFilename: '[contenthash].js'
    }
  },
  css: {
    extract: {
      // 入口CSS文件命名规则
      filename: '[contenthash].css',
      // 异步chunk对应CSS文件命名规则
      chunkFilename: '[contenthash].css'
    }
  }
})

配置完成后重新打包，所有JS、CSS文件都会按[contentHash].[ext]的格式生成，不会额外生成js/css子目录，也不会保留app、about这类前缀名称。

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