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_37337830/article/details/81507246

vue 用webpack打包文件名添加版本号相关推荐

Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
Vue+Vue Router+Webpack打包网站基础页面
Vue+Vue Router+Webpack打包网站基础页面 1.目录结构 2.package.json所需依赖包 {"name": "vue_router_webpac ...
Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体（Font）文件，devsever，生产环境配置以及css的兼容写法
目录一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件二.打包 ...
VUE项目WebPack打包删除注释和console
项目中使用了 jspdf 这个插件,webpack打包后注释里存在这样的领导让删除,于是使用插件 cnpm install uglifyjs-webpack-plugin -D vue.config ...
vue通过webpack打包后怎么运行
1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...
vue项目webpack打包优化体积优化，打包体积减少200kb到4Mb
解决方法 1.压缩图片应尽可能地压缩项目中的图片,或使用svg矢量图.雪碧图.webp图片(此种图片仅兼容谷歌和opera浏览器,但图片的体积更小)等小体积的图片,达到减少打包体积的目的. 2.路由 ...
vue使用webPack打包发布后页面显示空白
今天笔者将打包后,进行访问,访问到index.html,但是出现的是空白页. 打包命令:npm run build,打包后的文件如下: 这是因为index.html中引入的css ,js 的路径不对: ...
vue项目webpack打包配置
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(12) 前言一.webpack配置 1.配置vue.config.js 2.配置Dl ...
【vue】webpack打包vue项目并且运行在Tomcat里面
在package.json里面是script加入脚本 "publish": " webpack --config webpack.publish.config.js -p ...

vue 用webpack打包文件名添加版本号

vue 用webpack打包文件名添加版本号相关推荐

最新文章

热门文章