vue打包静态文件名称不加hash值和不修改文件夹结构

最新推荐文章于 2024-01-06 17:46:38 发布

imcmuc

最新推荐文章于 2024-01-06 17:46:38 发布

阅读量4.8k

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_38206656/article/details/122363317

版权

背景

使用vue脚手架开发前端项目引用了大量的图片，导致每次打包后都有好几百兆的大小，即使改动不涉及一些静态的图片和音频，打包的结果依然会修改静态文件名。如果只更新js文件等，会报引用无效的错误。这是因为每次打包的过程都会将每个静态文件名重新拼接一个hash值，同步，js内的引用也会修改为此值。导致服务器上已上传未作改动的静态文件无法复用。解决方式如下，副作用还没发现。

去除JS文件名的hash数

修改vue项目根目录下的 build/webpack.prod.conf.js文件

filename: utils.assetsPath('js/[name].[chunkhash].js'),

chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

修改为：

filename: utils.assetsPath('js/[name].js?t=[chunkhash]'),

chunkFilename: utils.assetsPath('js/[id].js?t=[chunkhash]')

这个是修改js文件名不增加hash，对我静态文件太大上传不便帮助不大。

去除CSS文件名的hash数

下面是css文件的，也是和js修改同一文件。

filename: utils.assetsPath('css/[name].[contenthash].css'),

修改为：

filename: utils.assetsPath('css/[name].css?t=[contenthash]'),

去除图片及其他静态文件文件名的hash数

重点来了，修改build/webpack.base.conf.js文件

name: 'img/[name].[hash:7].[ext]',

name: 'media/[name].[hash:7].[ext]',

name: 'fonts/[name].[hash:7].[ext]',

修改为（注意实际上在文件中这三行不是连续的）：

name: 'img/[name].[ext]',

name: 'media/[name].[ext]',

name: 'fonts/[name].[ext]',

打包以后果然不带hash值了，但是发现了一个更严重的问题，打包后的同类文件会在同一文件夹下：例如如果是图片，打包的结果是所有的图片都会在dist/static/img内，那么如果有同名的图片将只会保留一个（所以说胡乱明明害死人呐），这个问题的解决方式如下，需要将上述三行修改为：

name: 'img/[path]/[name].[ext]',

name: 'media/[path]/[name].[ext]',

name: 'fonts/[path]/[name].[ext]',

就会保留代码中的文件夹结构，测试结果是可以的，暂时没发现什么副作用。

这样也可以

正在我洋洋得意时，看见了同事每次打包都不需要上传无改动的静态文件，而且他打包也是使用的默认配置，仔细分析了一下代码发现，他代码所有的静态文件引用都是使用的绝对路径！！！是的，绝对路径的图片不会打包压缩，另外除了<style></style>内的文件都不会打包压缩，原因大概是，绝对路径的静态文件webpack不能肯定在不在本项目内，所有编译和打包时都忽略了。非css内的引用，webpack是没有编译功能的。原因是根据自己理解的，基本属于胡说八道，所以不要相信。

但是，根据我自己的经历还是别用绝对路径，原因如下：

1.开发时，静态文件被误删，编译器不会发现（但是反过来想一下，如果使用绝对路径是不是会减轻编译的负担），直到使用时才会暴露出来。

2.不能做二级目录项目，绝对路径的静态文件必须要放在服务对应目录的根目录下，不能使用二级目录访问。

3.使用ngnix代理时，需要额外配置，有可能和其他配置冲突。

如果能克服这三点，其他问题未知。

本文部分内容参考了其他博文链接如下：

vue webpack打包后静态资源文件名hash值去除_LeisureGuo的博客-CSDN博客

webpack打包图片到动态文件夹 - 菲菲菲菲翔 - 博客园

本文虽与其他博文有相识之处，也有自己的观点和总结。写此是为了记录防止之后遇到类似问题，非常感谢为互联网奉献的前辈。但是希望大家如果一模一样的观点还是不要重复发了，网上重复的东西实在是太多了。

为防止爬虫，本文链接：

vue打包静态文件名称不加hash值和不修改文件夹结构_imcmuc的博客-CSDN博客vue打包静态文件名称不加hash值和不修改文件夹结构的解决办法https://blog.csdn.net/qq_38206656/article/details/122363317