vue.js编译时给生成的文件增加版本号
更新时间：2018年09月17日 09:53:44 作者：至尊宝z紫霞
这篇文章主要介绍了vue.js编译时给生成的文件增加版本号，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue.js在生成相关js和css文件的时候，名称是通过HASH的方式进行生成的，但是每次生成的文件基本都是一样的，那么浏览器就会缓存这些文件，为了在更新的时候能够保证js和css文件能够更新，那么我们需要针对webpack的配置文件进行修改；
打开webpack.prod.conf.js文件进行如下操作
1.增加版本变量（版本号暂时用时间代替）
var Version = new Date().getTime();
2.修改要生成的js和css文件的配置项，把刚刚声明的版本拼接进要生成的文件名中；
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].' + Version + '.js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].' + Version + '.js')
},
3.执行编译命令npm run build 即可生成带版本号的js和css文件，打开dist目录就可以看到效果了;
ps：vue 用webpack打包文件名添加版本号
因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。
解决方法：找到webpack .prod.conf.js
1.定义版本变量： const Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ，也可以自己定义成别的如：1.1
2.修改要生成的js和css文件的配置项，把刚刚声明的版本拼接进要生成的文件名中；
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].' + Version + '.js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].' + Version + '.js')
},
然后直接 npm run build 打包后 就可以看到dist 文件里的js 文件名带上里版本号
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
elementUI中的$confirm调换两个按钮位置的实例代码
这篇文章主要介绍了elementUI中的$confirm调换两个按钮位置的实例代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了vuex刷新页面后如何解决丢失store的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了浅谈Vue.js 组件中的v-on绑定自定义事件理解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
今天小编就为大家分享一篇vue-auto-focus: 控制自动聚焦行为的 vue 指令方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
vue2.0 中使用transition实现动画效果使用心得
这篇文章主要介绍了vue2.0 中使用transition实现动画效果使用心得，本文通过案例知识给大家介绍的非常详细，需要的朋友参考下吧2018-08-08
在日常开发中随着需求的个性化,逻辑的复杂化,自定义组件也变得越来越常见,这篇文章主要给大家介绍了关于vue进度条组件实现(可拖拽可点击)的相关资料,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue项目接口访问地址设置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
本文主要介绍，通过使用基于 vue技术栈的前端开发技术，在浏览器端调起摄像头，并进行扫码识别功能，对识别到的二维码进行跳转或其他操作处理，对vue浏览器扫码功能的实现代码感兴趣的朋友一起看看吧2021-10-10
Element中el-input密码输入框浏览器自动填充账号密码问题的解决方法
自己写了一个管理系统,登录成功之后,浏览器提示我保存账号密码,每次登录时就会自动回填记住的账号密码,方便用户快速登录,下面这篇文章主要给大家介绍了关于Element中el-input密码输入框浏览器自动填充账号密码问题的解决方法,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了Vue.js路由vue-router使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最新评论