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 文件名带上里版本号
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue-cli 作为 Vue 官方推荐的项目构建脚手架，它提供了开发过程中常用的，热重载，构建，调试，单元测试，代码检测等功能。我们本次的异步远端组件将基于 vue-cli 开发2017-11-11
这篇文章主要为大家介绍了创建和运行Vue.js项目方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
vue3+vite3+typescript实现验证码功能及表单验证效果
这篇文章主要介绍了vue3+vite3+typescript实现验证码功能及表单验证效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
Vue实现导出Excel表格文件提示“文件已损坏无法打开”的解决方法
xlsx用于读取解析和写入Excel文件的JavaScript库,它提供了一系列的API处理Excel文件,使用该库,可以将数据转换Excel文件并下载到本地,适用于在前端直接生成Excel文件,这篇文章主要介绍了Vue实现导出Excel表格,提示文件已损坏,无法打开的解决方法,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue使用原生js创建元素样式不生效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了WebPack配置vue多页面的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了vue中定时器setInterval的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了element上传组件循环引用及简单时间倒计时的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
vue中的this.$router.push()路由传值方式
这篇文章主要介绍了vue中的this.$router.push()路由传值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了在nuxt中使用路由重定向的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论