视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
vue.js编译时给生成的文件增加版本号
2020-11-27 22:07:43 责编:小采
文档


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

下载本文
显示全文
专题