Vue 打包上線后的緩存問題

問題描述
大家用vue腳手架搭建前端工程時，常被緩存問題所困擾，具體的表現就是，當程序版本升級時，用戶因為緩存訪問的還是老的頁面，然后很多同學很暴力的直接在index.html中加入了這幾行代碼：
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

升級時緩存問題倒解決了，但直接導致了用戶每次訪問你的程序時都要重新請求服務器，所有的靜態資源都無法用緩存了，浪費流量，網絡壓力變大。
需求澄清
我們真正需要解決的問題，不是單純的要緩存或者不要緩存，而是期望視情況而定：

程序每次升級后，用戶都不會因為緩存問題而執行的仍然是老的程序。
若程序沒升級，用戶對靜態資源的請求則能用到緩存。

解決原理
由於vue腳手架每次打包時，都會將打出的靜態資源文件名加個哈希后綴，且index.html中引入時也加了對應的哈希后綴，所以每個版本的靜態資源都是全新的，不用擔心因升級導致的緩存問題。那么只需讓index.html不緩存，且讓其他靜態資源緩存，就能實現要求。
讓靜態資源有緩存好辦，問題在於怎么只讓index.html不緩存。這里我們已經不能單單靠前端代碼來實現了，需要用到服務器配置。通過服務器配置，來單獨設置請求index.html時的header，以達到控制緩存的目的。
具體實現
如果你是Nginx：
Ngnix還是比較容易實現的，只需增加以下配置：
location = /index.html {
 add_header Cache-Control "no-cache, no-store";
}

修改webpack的配置文件
 configureWebpack: { // webpack 配置
        output: { // 輸出重構  打包編譯后的 文件名稱  【模塊名稱.版本號.時間戳】
            filename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        },
    }

onst Timestamp = new Date().getTime();
// Vue.config.js 配置選項
module.exports = {
    // publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/',

    //基本路徑
    publicPath: '/',//默認的'/'是絕對路徑，如果不確定在根路徑，改成相對路徑'./'
    // 輸出文件目錄
    outputDir: 'dist',
    assetsDir: 'static',
    indexPath: 'index.html',
    // eslint-loader 是否在保存的時候檢查
    lintOnSave: true,
    // 生產環境是否生成 sourceMap 文件
    productionSourceMap: false,
    // css相關配置
    css: {
        // 是否使用css分離插件 ExtractTextPlugin
        // extract: true,
        // 開啟 CSS source maps?
        sourceMap: false,
    },
    // webpack-dev-server 相關配置
    devServer: {
        open: true,//open 在devServer啟動且第一次構建完成時，自動用我們的系統的默認瀏覽器去打開要開發的網頁
        host: 'localhost',//默認是 localhost。如果你希望服務器外部可訪問，指定如下 host: '0.0.0.0'，設置之后之后可以訪問ip地址
        port: 8080,
        hot: true,//hot配置是否啟用模塊的熱替換功能，devServer的默認行為是在發現源代碼被變更后，通過自動刷新整個頁面來做到事實預覽，開啟hot后，將在不刷新整個頁面的情況下通過新模塊替換老模塊來做到實時預覽。
        https: false,
        hotOnly: false,// hot 和 hotOnly 的區別是在某些模塊不支持熱更新的情況下，前者會自動刷新頁面，后者不會刷新頁面，而是在控制台輸出熱更新失敗
        proxy: {
            '/api': {
                target: 'http://localhost:8080', //目標接口域名
                secure: false, //false為http訪問，true為https訪問
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    '^/api': '' //重寫接口
                }
            }
        }, // 設置代理
        before: app => { }
    },
    configureWebpack: { // webpack 配置
        output: { // 輸出重構  打包編譯后的 文件名稱  【模塊名稱.版本號.時間戳】
            filename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        },
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
};