缓存策略

设置HTML页面不缓存,其他页面缓存(主要是JS),并且打包的时候生成hash,比如:app.4fc510ca.js

这样可以保证每次发布更新后,不需要客户端显示点F5来刷新页面

vue.config.js


const webpack = require("webpack");
let path = require("path");
const version = new Date().getTime();

function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    publicPath: './',
    assetsDir: 'static',
    filenameHashing: true,
    configureWebpack: (config) => {
        // 只在生产环境添加哈希
        if (process.env.NODE_ENV === 'production') {
            return {
                output: {
                    filename: '[name].[contenthash:8].js', // JS 文件名
                    chunkFilename: '[name].[contenthash:8].js' // 异步块文件名
                },
                optimization: {
                    splitChunks: {
                        chunks: 'all',
                        cacheGroups: {
                            vendors: {
                                test: /[\\/]node_modules[\\/]/,
                                name: 'chunk-vendors',
                                enforce: true
                            }
                        }
                    }
                }
            };
        }
    },
    css: {
        loaderOptions: {
            sass: {
                // 旧版 在 sass-loader v7 中,选项名使用data
                data: `@import "~@/assets/scss/commen.scss";`
                // 新版sass-loader,选项名使用prepend
                // prependData: `@import "~@/assets/css/commen.scss";`
            }
        }
    },
    devServer: {
        port: 8080,
        open: true,
    }
}

nginx.conf

server {
    listen 443 ssl;
    server_name  www.test.com;
    root  /home/wwwroot/www-test-dist/dist;

    error_page   404   /404.html;

    ssl_certificate cert/crm.pem;           # 证书名
    ssl_certificate_key cert/crm.key;       # 证书密钥
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;  #使用此加密套件。
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;   #使用该协议进行配置。
    ssl_prefer_server_ciphers on;


    # 处理根目录和路径请求
    location / {
        # 入口页面请求 - 设置无缓存
        add_header Cache-Control "no-cache, must-revalidate";

        # 尝试查找文件,不存在则返回index.html
        try_files $uri $uri/ /index.html;
    }

    # 处理直接请求的HTML文件(如访问 /index.html)
    location ~* \.(html|htm)$ {
        # 确保HTML文件不缓存
        add_header Cache-Control "no-cache";
        add_header Pragma "no-cache";
        add_header Expires "0";
        try_files $uri /index.html;
    }

    # 处理带查询参数的请求
    location ~* \? {
        add_header Cache-Control "no-cache";
        add_header Pragma "no-cache";
        add_header Expires "0";
        try_files $uri $uri/ /index.html;
    }

    # 静态资源(30天缓存)
    location ~* \.(?:js|css|png|jpg|jpeg|gif|ico|map|woff|ttf)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }


    access_log  /home/wwwlogs/www_test_client.log main;
    error_log   /home/wwwlogs/www_test_error.log error;
}

results matching ""

    No results matching ""