vue.js编译时给生成的文件增加版本号


Posted in Javascript onSeptember 17, 2018

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 文件名带上里版本号

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
javascript一些不错的函数脚本代码
Sep 10 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
js实现文章目录索引导航(table of content)
May 10 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 #Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 #Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 #Javascript
Puppet的一些技巧
Sep 17 #Javascript
详解JavaScript添加给定的标签选项
Sep 17 #Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 #Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 #Javascript
You might like
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
JS面向对象编程 for Cookie
2010/09/19 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
python提示No module named images的解决方法
2014/09/29 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
Python函数式编程实例详解
2020/01/17 Python
教学个人的自我评价分享
2014/02/16 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
学习作风建设心得体会
2014/10/22 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
微信搭讪开场白
2015/05/28 职场文书
清明扫墓感想
2015/08/11 职场文书
趣味运动会标语口号
2015/12/26 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python