在 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
