Vue如何實現(xiàn)打包資源按時間戳方式
更新時間：2024年05月31日 15:09:43 作者：古辛
這篇文章主要介紹了Vue如何實現(xiàn)打包資源按時間戳方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue打包資源按時間戳
問題
由于默認的Vue打包是基于資源文件的hash模式，但是由于瀏覽器緩存，在實際發(fā)版過程中會出現(xiàn)引用老版本的問題。
解決
修改Vue資源打包，在資源文件后加上打包時間戳，以保證每次發(fā)版后，所有資源均為最新，避免緩存引用問題，盡管犧牲掉發(fā)版后文件加載的效能問題，但是也解決了潛在的緩存問題。
修改
修改“vue.config.js”文件配置：
const Timestamp = new Date().getTime();
module.exports = {
.......
css: {
extract: {
filename: `css/[name].${Timestamp}.css`,
chunkFilename: `css/[name].${Timestamp}.css`
}
},
chainWebpack: config => {
config.output.filename(`js/[name].${Timestamp}.js`)
config.output.chunkFilename(`js/[name].${Timestamp}.js`)
.......
vue打包添加時間戳,實現(xiàn)更新項目自動清除緩存（webpack/vue-cli打包兩種方式）
本來vue打包會自動用chunkhash來解決緩存問題，但是部分瀏覽器不會自動更新，因此通過增加時間戳不同來實現(xiàn)自動重新加載文件，保持最新的界面。
webpack打包
修改build/webpack.prod.conf.js文件
使用vue-cli打包
修改vue.config.js文件
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue.delete()刪除對象的屬性說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中子組件如何間接修改父組件傳遞過來的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue中動態(tài)路由加載組件,找不到module問題及解決
這篇文章主要介紹了vue中動態(tài)路由加載組件,找不到module問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了關(guān)于Vue中v-show中添加表達式用于判斷是否顯示的問題,很多朋友經(jīng)常會遇到這樣的需求，有數(shù)據(jù)來源和標簽類型兩行選項，需要實現(xiàn)點擊上面的某個數(shù)據(jù)來源時，標簽類型自動切換功能，感興趣的朋友一起看看吧2018-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端的開關(guān)按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了Vue實現(xiàn)頁面跳轉(zhuǎn)方式及傳參方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了如何利用Vue實現(xiàn)一個春節(jié)抽?？撁?，采用了卡牌翻轉(zhuǎn)的形式。文中的實現(xiàn)方法講解詳細，快跟隨小編一起學(xué)習(xí)一下吧2022-02-02
Vue?element-ui中表格過長內(nèi)容隱藏顯示的實現(xiàn)方式
在Vue項目中,使用ElementUI渲染表格數(shù)據(jù)時,如果某一個列數(shù)值長度超過列寬,會默認換行,造成顯示不友好,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui中表格過長內(nèi)容隱藏顯示的實現(xiàn)方式,需要的朋友可以參考下2022-09-09
解決vue elementUI 使用el-select 時 change事件的觸發(fā)問題
這篇文章主要介紹了解決vue elementUI 使用el-select 時 change事件的觸發(fā)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
使用vue-router切換頁面時，獲取上一頁url以及當前頁面url的方法
這篇文章主要介紹了使用vue-router切換頁面時，獲取上一頁url以及當前頁面url的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05