vue在打包的时候能不能固定assets里的js和css文件名称

克里斯前端2025-06-12 18:39

在 Vue 项目中（特别是使用 Vue CLI 构建的项目），打包时生成的 assets 目录下的 .js 和 .css 文件默认会带有哈希值（如 app.123abc.js），这是为了缓存优化。但你可以配置固定名称，方法如下：

方法一：Vue CLI 修改 vue.config.js

在项目根目录创建或修改 vue.config.js 文件，添加如下配置：

复制代码

module.exports = {
  // 关闭文件名中的 hash 值
  filenameHashing: false,

  // 自定义输出文件名
  configureWebpack: {
    output: {
      filename: 'js/[name].js',
      chunkFilename: 'js/[name].js'
    }
  },

  css: {
    extract: {
      filename: 'css/[name].css',
      chunkFilename: 'css/[name].css'
    }
  }
}

🔍 参数说明：

filenameHashing: false：关闭自动生成的 [hash]，让文件名保持固定。
output.filename：主入口 JS 文件名。
output.chunkFilename：分包/异步加载的 JS 文件名。
css.extract.filename：主 CSS 文件名。
css.extract.chunkFilename：异步 CSS 文件名。

构建后目录结构示例：

复制代码

dist/
  ├── index.html
  ├── js/
  │   ├── app.js
  │   └── chunk-vendors.js
  └── css/
      ├── app.css
      └── chunk-vendors.css

注意事项：

关闭哈希可能导致浏览器缓存问题，除非你使用文件版本控制或手动清缓存。
如果你使用的是 Vite 而不是 Vue CLI，配置方式会不同。
以上配置适用于 vue-cli@3/4/5。

Vite 方式

复制代码

build: {
  rollupOptions: {
    output: {
      entryFileNames: 'assets/js/[name].js',
      chunkFileNames: 'assets/js/[name].js',
      assetFileNames: ({ name }) => {
        if (name && name.endsWith('.css')) {
          return 'assets/css/[name].[ext]';
        }
        return 'assets/[name].[ext]';
      }
    }
  }
}

输出示例

复制代码

dist/
├── index.html
└── assets/
    ├── js/
    │   ├── main.js
    │   └── vendor.js
    └── css/
        └── style.css