vue首頁白屏清除緩存解決方案

發現問題

近期vue項目在構建完成上線之後，每次往線上更新版本，總會收到一部分反饋——web頁面白屏，需要清除緩存數據重新加載才能正常訪問。

問題分析

首先排除掉了publicPath設置問題，因爲大部分用戶能正常訪問到頁面，無報錯。其次排除首頁加載過慢問題，因爲白屏無論多久都不會渲染頁面。最終定位到緩存問題，產生原因如下：

在首次上線項目時，build生成的資源文件直接放到服務端上線即可。但是當第n（n>1）次上線後，由於在用戶端會默認緩存index.html入口文件，而由於vue打包生成的css/js都是哈希值，跟上次的文件名都不同，因此會出現找不到css/js的情況，導致白屏的產生。

優化方案

1. meta標籤

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache" content="no-cache">

2. 時間戳區分

在項目的配置頁面添加打包配置，根據vue腳手架不同分以下兩種情況：

1. [email protected]

// webpack.prod.conf.js
const Timestamp = new Date().getTime();
...

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].' + Timestamp + 'js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].' + Timestamp + 'js')
}

2. [email protected]

// vue.config.js
const Timestamp = new Date().getTime();
...
module.exports = {
    configureWebpack: config => {
        config.output.filename = `js/[name].${Timestamp}.js?t=[hash]`;
        config.output.chunkFilename = `js/[id].${Timestamp}.js?t=[hash]`;
    },

    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 爲生產環境修改配置...
            config.plugin('extract-css').tap(args => [{
                filename: `css/[name].${Timestamp}.css`,
                chunkFilename: `css/[name].${Timestamp}.css`
            }])
        }
    },
}

3. 服務端配置(nginx)

這個有非常重要，需要跟服務端同事溝通，請他們在服務端配合配置nginx服務。
服務端配置主要解決：

• 設置index.html在用戶端不緩存，這樣每次拉取的都是線上最新資源；
• 設置css和js文件一定的緩存期，合理利用緩存。

這樣配置的好處是，如果線上資源沒有更新，我們合理的利用緩存對大體積資源（樣式腳本等）緩存，如果更新了資源，那麼index.html文件則實時更新，用戶端所得到的html文件也是最新資源，樣式及腳本資源都會重新獲取服務器最新資源緩存到本地。

server {
        listen       90;
        server_name  22782.s1.natapp.cc;
        location / {
          root /apps/laikePay/; 
          try_files $uri $uri/ /index.html;
                }

      location ^~ /beauty/{
                  alias /apps/laikeBeauty/;
        #以下配置解決html不緩存，css和js分別緩存7天和30天
        if ($request_filename ~* .*\.(?:htm|html)$)
            {
                  add_header Cache-Control "private, no-store, no-cache";
            }
        if ($request_filename ~* .*\.(?:js|css)$)
            {
                  add_header Cache-Control max-age=604800;
            }
        if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$)
            {
                  add_header Cache-Control max-age=2592000;
            }
                  try_files $uri $uri/ /beauty/index.html;
      }
      location  ^~ /beautyThemeChange/{
            alias /apps/laikeBeautyThemeChange/;
            try_files $uri $uri/ /beautyThemeChange/index.html;
        }
        location  ^~ /retail/{
         #   alias /apps/laikeRetail/;
         #   try_files $uri $uri/ /retail/index.html;
        proxy_pass http://22782.s1.natapp.cc/beauty/;
      }

      #location ^~ /merchantPhoneApp/ {
        #alias /apps/merchantPhoneApp/;
        #try_files $uri $uri/ /merchantPhoneApp/index.html;
      #}
}