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',
    /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
    filenameHashing: false,
    /* 调整内部的 webpack 配置 */
    /* configureWebpack:{
        plugins: [
            new webpack.ProvidePlugin({
                jQuery: 'jquery',
                $: 'jquery',
                'windows.jQuery': 'jquery'
            }),
        ],
        // 打包编译后修改 js 文件名
        output: {
            filename: `assets/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `assets/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        }
    }, */
    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 / {
        root /yourdir/;
        index index.html index.htm;
        add_header Cache-Control no-store;
        add_header Pragma no-cache;
    }
}