Vue项目部署上线清理浏览器缓存（二）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第26天，点击查看活动详情。

在上一章中我们说到了关于缓存以及浏览器缓存的知识，这一章我们将详细看看到底如何解决Vue项目部署问题.

分析

在上一章我们已经知道为啥会出现缓存，那么我们可以思考下，为什么前端部署后会有缓存呢？原因有以下几种：

index.html由于是在打包的时候处在public文件夹下，所以他的文件是不变得。所以会有缓存存在
js,以及css文件采用默认的打包机制，只是文件增加hash值，在某种情况下会存在hash值不变导致的缓存
服务器缓存

解决方案

`index.html`缓存

我们为了避免index.html出现缓存，我们可以通过在head标签中添加meta即可。在前面我们知道当expires设置为0后，以及设置cache-control为no-cache。浏览器当访问index.html的时候，会去服务器咨询，是否需要更新，代码如下：

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">

通过上述配置，每次访问index.html时都会去服务器咨询是否需要更新。服务器走协商缓存处理逻辑。

js，css缓存

从前面的文章中，在webpack中，我们可以通过配置output来管理输出，因此我们只需要在vue.config.js配置文件中将output修改，就能满足了。如何能保证输出的文件名是不会相同的呢，最简单的方法就是使用时间戳的方式。代码如下：

const version = new Date().getTime();
module.exports = {
    configureWebpack: config => {
      Object.assign(config,{
        entry: {
          app: '/src/main.ts'
        },
        output:{
          ...config.output,
          filename:`static/js/[name].[hash].${version}.js`,
          chunkFilename:`static/js/[name].[hash].${version}.js`,
        }
      });
  }
}

这样通过上面的配置，每个文件输出的名称都会在默认的基础上增加一个时间戳。这样当我们重新部署后访问的时候，由于访问的时候，文件名变了，所以会重新请求，而不是走缓存。

服务器缓存

由于我们现在大都采用nginx进行服务转发，所以有的时候会存在nginx缓存、所以我们只需要在nginx.conf文件增加Cache-Control配置即可。代码如下：

 server {
    location = / {
        try_files $uri /index.html;
        add_header Cache-Control 'no-cache, no-store';
    }
 }

但是如果这样设置后，其实可以理解为每次都需要去咨询服务器是否更新，这样每次刷新页面的时候，会导致加载时间太长。各位酌情加

至此vue项目部署上线需要清理缓存问题解决了。

Vue项目部署上线清理浏览器缓存（二）

分析

解决方案

index.html缓存

js，css缓存

服务器缓存

`index.html`缓存