vue.js编译时给生成的文件增加版本号
作者：至尊宝z紫霞 发布时间：2024-05-10 14:18:15
标签：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 文件名带上里版本号
来源：https://blog.csdn.net/qq_21804983/article/details/80533977
0
投稿猜你喜欢
效果图如下所示： 前言嗨，说起探探想必各位程序汪都不陌生(毕竟妹子很多)，能在上面丝滑的翻牌子，探探的的堆叠滑动组件起到了关键的作- 前言pandas数据框针对高维数据，也有多层索引的办法去应对。多层数据一般长这个样子可以看到AB两大列，下面又有xy两小列。 行有abc三行
- 这篇文章主要介绍了python中的引用和拷贝实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友
- 技术栈vue.js 主框架vuex 状态管理vue-router 路由管理一般过程在一般的登录过程中，一种前端方案是：检查状态：进入页面时或
- 一、前言最近新买了一台 LG Gram，电脑空荡荡的，啥都得重头装，记录一下 Git 的安装过程，温习温习。二、Git 的安装2.1 Git
- 由于想要使用pycharm连接Window子系统Ubuntu进行开发，找了很多教程都不够详细，花了点儿时间，最后配置成功。将pycharm连
- vscode中安装ms-vscode.go插件后可以开启对go语言的支持,ms-vscode.go插件需要依赖一些工具,安装完成后提示goc
- 导语昨晚玩起了小时候玩的游戏“吃豆豆”，但是我发现，一局游戏三条命，我根本不能吃完所有的豆豆，总是被
- 一、简单使用def TestLogBasic(): import logging
- 本文实例讲述了Python动态导入模块的方法。分享给大家供大家参考，具体如下：一、正常导入模块正常模块导入方式： import module
- 在django中创建表，会自动创建一些django自带的表，先了解用户认证，认证登录 先要引用 ,from django.contrib i
- javascript时间戳和日期字符串相互转换代码(超简单)<html xmlns="http://www.w3.org/1
- 如下所示：# -*- coding: utf-8 -*-# 要求：输入一行字符，分别统计出其中英文字母、空格、数字和其它字符的个数。def
- 简介pandas按条件筛选数据时，除了使用query()方法，还可以使用isin和对isin取反进行条件筛选.代码 import panda
- 方式一：直接通过数据库厂商提供的相关驱动步骤导入相关驱动（Build Path）创建Driver类的实例化对象获取要连接数据库的URL创建P
- 迪杰斯特拉（Dijkstra）算法主要是针对没有负值的有向图，求解其中的单一起点到其他顶点的最短路径算法。1 算法原理迪杰斯特拉（Dijks
- 本文实例讲述了Python中itertools模块用法，分享给大家供大家参考。具体分析如下：一般来说，itertools模块包含创建有效迭代
- 微软在12月22日早上发布新的安全通告证实，一处远程执行代码漏洞影响到了整个SQL Server产品线。该漏洞的入侵代码在两周前已经被公布在
- 本文实例讲述了JQuery中serialize()用法。分享给大家供大家参考。具体分析如下：一、serialize()定义和用法：seria
- torch.nn.BatchNorm1d()1、BatchNorm1d(num_features, eps = 1e-05, momentu
