vueCli3.0 前端打包项目部署nginx后去除缓存

前言： vue项目每次打包上线后，浏览器需要强制刷新浏览器才能去除缓存，更新最新的版本，这样做的话，肯定不是很合理。

解决原理：

由于vue脚手架每次打包时，都会将打出的静态资源文件名加个哈希后缀，且index.html中引入时也加了对应的哈希后缀，所以每个版本的静态资源都是全新的，不用担心因升级导致的缓存问题。那么只需让index.html不缓存，且让其他静态资源缓存，就能实现要求。

让静态资源有缓存好办，问题在于怎么只让index.html不缓存。这里我们已经不能单单靠前端代码来实现了，需要用到服务器配置。通过服务器配置，来单独设置请求index.html时的header，以达到控制缓存的目的。

后端服务器（nginx服务器为准）：

Nginx还是比较容易实现的，只需增加以下配置：

location = /index.html {
 add_header Cache-Control "no-cache, no-store";
}

前端处理方法：

一、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.config.js 里面添加这个 output

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`
        },
    }

如果大家的configureWebpack: config 里面还有其他的配置项，建议这样写。

            
const version = new Date().getTime();
process.env.VUE_APP_VERSION = require('./public/json/version.json').versionDate; // 获取版本号

// output 输出打包文件加版本号
            config.output.filename = `assets/js/[name].${process.env.VUE_APP_Version}.${version}.js`
            config.output.chunkFilename = `assets/js/[name].${process.env.VUE_APP_Version}.${version}.js`
            config.output.path = path.resolve(__dirname, 'dist')

关于项目有用到版本号的，一本都是放在本地的json文件里面，通过axios.get() 获取到。

Vue中请求本地JSON文件并返回数据  
  首先在根目录pulic下面建个json文件
  检查一下自己是否安装过json-server(没安装的话安装一下)
  npm install json-server
  安装完成以后我们就可以运行自己的json文件了
  axios.get(`/json/projectinformation.json`).then((res)=>{})

vue页面使用的时候，最好用计算属性获取版本号：

 computed: {
    versionName: function() {
      return localStorage.getItem('version') // 获取系统版本号
    }
  },