vue.js編譯時(shí)給生成的文件增加版本號(hào)
vue.js在生成相關(guān)js和css文件的時(shí)候，名稱是通過(guò)HASH的方式進(jìn)行生成的，但是每次生成的文件基本都是一樣的，那么瀏覽器就會(huì)緩存這些文件，為了在更新的時(shí)候能夠保證js和css文件能夠更新，那么我們需要針對(duì)webpack的配置文件進(jìn)行修改；
打開(kāi)webpack.prod.conf.js文件進(jìn)行如下操作
1.增加版本變量（版本號(hào)暫時(shí)用時(shí)間代替）
var Version = new Date().getTime();
2.修改要生成的js和css文件的配置項(xiàng)，把剛剛聲明的版本拼接進(jìn)要生成的文件名中；
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].' + Version + '.js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].' + Version + '.js')
},
3.執(zhí)行編譯命令npm run build 即可生成帶版本號(hào)的js和css文件，打開(kāi)dist目錄就可以看到效果了;
ps：vue 用webpack打包文件名添加版本號(hào)
因?yàn)g覽器緩存原因?qū)е聉ue 打包的文件 導(dǎo)致偶爾會(huì)出現(xiàn)不能即使更新最新代碼。因此在打包的文件名中添加一個(gè)版本號(hào)以便瀏覽器能區(qū)分。
解決方法：找到webpack .prod.conf.js
1.定義版本變量： const Version = new Date().getTime(); // 這里使用的是時(shí)間戳 來(lái)區(qū)分 ，也可以自己定義成別的如：1.1
2.修改要生成的js和css文件的配置項(xiàng)，把剛剛聲明的版本拼接進(jìn)要生成的文件名中；
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 文件名帶上里版本號(hào)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli 作為 Vue 官方推薦的項(xiàng)目構(gòu)建腳手架，它提供了開(kāi)發(fā)過(guò)程中常用的，熱重載，構(gòu)建，調(diào)試，單元測(cè)試，代碼檢測(cè)等功能。我們本次的異步遠(yuǎn)端組件將基于 vue-cli 開(kāi)發(fā)2017-11-11
創(chuàng)建和運(yùn)行Vue.js項(xiàng)目方法demo
這篇文章主要為大家介紹了創(chuàng)建和運(yùn)行Vue.js項(xiàng)目方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
vue3+vite3+typescript實(shí)現(xiàn)驗(yàn)證碼功能及表單驗(yàn)證效果
這篇文章主要介紹了vue3+vite3+typescript實(shí)現(xiàn)驗(yàn)證碼功能及表單驗(yàn)證效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue實(shí)現(xiàn)導(dǎo)出Excel表格文件提示“文件已損壞無(wú)法打開(kāi)”的解決方法
xlsx用于讀取解析和寫(xiě)入Excel文件的JavaScript庫(kù),它提供了一系列的API處理Excel文件,使用該庫(kù),可以將數(shù)據(jù)轉(zhuǎn)換Excel文件并下載到本地,適用于在前端直接生成Excel文件,這篇文章主要介紹了Vue實(shí)現(xiàn)導(dǎo)出Excel表格,提示文件已損壞,無(wú)法打開(kāi)的解決方法,需要的朋友可以參考下2024-01-01
vue使用原生js創(chuàng)建元素樣式不生效問(wèn)題及解決
這篇文章主要介紹了vue使用原生js創(chuàng)建元素樣式不生效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了WebPack配置vue多頁(yè)面的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
vue中定時(shí)器setInterval的使用及說(shuō)明
這篇文章主要介紹了vue中定時(shí)器setInterval的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
element上傳組件循環(huán)引用及簡(jiǎn)單時(shí)間倒計(jì)時(shí)的實(shí)現(xiàn)
這篇文章主要介紹了element上傳組件循環(huán)引用及簡(jiǎn)單時(shí)間倒計(jì)時(shí)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vue中的this.$router.push()路由傳值方式
這篇文章主要介紹了vue中的this.$router.push()路由傳值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了在nuxt中使用路由重定向的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11