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