vue在打包的时候能不能固定assets里的js和css文件名称
在 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