問題描述

當程式版本升級時，使用者因為快取訪問的還是老的頁面，不會自動更新修改的的檔案

解決方案

兩種解決方案均可

1. nginx

server {
    listen 80;
    server_name yourdomain.com;
    location / {
        try_files $uri $uri/ /index.html;
        root /yourdir/;
        index index.html index.htm;

        if ($request_filename ~* .*\.(?:htm|html)$)
        {
            add_header Cache
 
-Control "no-cache, no-store";  //對html檔案設定永遠不快取
        }      
      }
}

• no-cache
  資料內容不能被快取, 每次請求都重新訪問伺服器, 若有max-age（最大快取期）, 則快取期間不訪問伺服器
• no-store
  不僅不能快取, 連暫存也不可以(即: 臨時資料夾中不能暫存該資源)

2. vue.config.js

let timeStamp = new Date().getTime();
configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.output.filename 
 
= `js/[name].${timeStamp}.js`
            config.output.chunkFilename = `js/[name].${timeStamp}.js`
         }
    },
css: {
        extract: { 
            ignoreOrder: true,
            filename: `css/[name].${timeStamp}.css`,
            chunkFilename: `css/[name].${timeStamp}.css`,
        }
    },