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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
canvas红包照片实例分享
Feb 28 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
详解关于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
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
php中curl使用指南
2015/02/05 PHP
PHP获取文件行数的方法
2015/06/10 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
2016/08/02 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
20个常用Python运维库和模块
2018/02/12 Python
python事件驱动event实现详解
2018/11/21 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
详解pandas映射与数据转换
2021/01/22 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
CAD制图人员的自荐信
2014/02/07 职场文书
党校学习自我鉴定
2014/02/24 职场文书
安全责任书范文
2014/03/12 职场文书
《桥》教学反思
2014/04/09 职场文书
《春晓》教学反思
2014/04/20 职场文书
审计班子对照检查材料
2014/08/27 职场文书
2015党建工作简报
2015/07/21 职场文书
教师研修随笔感言
2015/11/18 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS