Vue 部署上线清除浏览器缓存

vue 项目打包上线之后，每一次都会有浏览器缓存问题，需要手动的清除缓存。这样用户体验非常不好，所以我们在打包部署的时候需要尽量避免浏览器的缓存。

一、修改根目录index.html

public/index.html 文件修改

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

二、打包的文件路径添加时间戳

vue.config.js 文件修改

const Timestamp = new Date().getTime();

module.exports = {
    assetsDir: 'assets',
    configureWebpack: config => {
        // 打包编译后修改 js 文件名
        config.output.filename = `assets/js/[name].${Timestamp}.js`;
        config.output.chunkFilename = `assets/js/[name].${Timestamp}.js`;
    },
    css: {
        extract: {
            // 打包编译后修改 css 文件名
            filename: `assets/css/[name].${Timestamp}.css`,
            chunkFilename: `assets/css/[name].${Timestamp}.css`
        }
    }
}

三、配置 nginx 不缓存 html

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;
            add_header Pragma no-cache;
        }
    }
}