账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue-cli3项目打包之后，放置到nginx上，浏览器会有缓存，怎么处理？
    41
    0

    现在生产中遇到一个问题，就是vue-cli3项目打包之后，放置到nginx上，浏览器会有缓存，这个需要怎么处理？

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 我瞎跟我走 普通会员 1楼

      在Vue CLI 3项目打包之后，若要在Nginx上处理浏览器的缓存，可以采用以下几种方法：

      1. 设置预处理器：Vue CLI 3默认提供了--build-optimizer选项，该选项会使用--optimization-cache选项进行优化。你可以将--optimization-cache选项设置为true，然后在你的Nginx配置文件中添加以下内容：

      nginx server { location / { try_files $uri $uri/ /index.html; if (-f $uri) { if (GET request_method = GET) { if (headers.get('Cache-Control') != 'no-cache') { return 403; } } if (headers.get('Cache-Control') == 'no-cache') { expires 0; return 304; } if (headers.get('Pragma') != 'no-cache') { return 403; } if (headers.get('Last-Modified') != 'Mon, 01 Jan 1970 00:00:00 GMT') { return 403; } return 200; } } }

      此配置在请求包含GET方法时，如果响应头中没有Cache-Control或Pragma头中的no-cache值，Nginx将直接返回200状态码，并处理请求内容。

      1. 设置HTTP缓存：如果你不想在服务器端进行缓存处理，你可以通过在Nginx配置文件中设置gzip或compress模块来处理HTTP响应内容。在你的nginx.conf文件中添加以下内容：

      ```nginx location / { gzip on; gzip_types text/plain application/json application/x-www-form-urlencoded application/json text/xml text/xml application/xml media-type text/css text/html text/javascript application/javascript application/x-javascript text/x-component; gzip_disable "msie6";

      if (-f $uri) {
    if (GET request_method = GET) {
        if (headers.get('Cache-Control') != 'no-cache') {
            return 403;
        }
    }
    if (headers.get('Cache-Control') == 'no-cache') {
        if (headers.get('Pragma') != 'no-cache') {
            return 403;
        }
        if (headers.get('Last-Modified') != 'Mon, 01 Jan 1970 00:00:00 GMT') {
            return 403;
        }
        return 200;
    }
}

      } ```

      在此配置中，我们启用gzip模块，并配置了HTTP响应内容类型为text/plain，application/json，application/x-www-form-urlencoded等，以匹配大部分常见的HTTP响应内容类型。同时，我们设置了gzip_disable头部来禁用IE6的msie6缓存。

      1. 使用缓存控制头：如果你的Vue项目直接使用了<script>标签来嵌套<script>标签，并且这些标签包含了<script>标签的来源，你可以通过在<head>标签中设置Cache-Control头部来设置缓存控制。例如：

      html <head> <meta name="Cache-Control" content="max-age=3600"> </head>

      这将设置响应内容的缓存时间为1小时，即缓存期限为1小时。如果在这个时间内请求内容没有被客户端清除，Nginx将不会缓存这个请求内容，直接返回200状态码。

      1. 使用缓存令牌：如果你的Vue项目使用了CDN，你可以通过在Nginx配置文件中设置Cache-Control头部和Expires头部来设置缓存令牌。例如：

      ```nginx location / { gzip on; gzip_types text/plain application/json application/x-www-form-urlencoded application/json text/xml text/xml application/xml media-type text/css text/html text/javascript application/javascript application/x-javascript text/x-component; gzip_disable "msie6";

      if (-f $uri) {
    if (GET request_method = GET) {
        if (headers.get('Cache-Control') != 'no-cache') {
            return 403;
        }
    }
    if (headers.get('Cache-Control') == 'no-cache') {
        if (headers.get('Pragma') != 'no-cache') {
            return 403;
        }
        if (headers.get('Last-Modified') != 'Mon, 01 Jan 1970 00:00:00 GMT') {
            return 403;
        }
        return 200;
    }
    if (!isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) || $_SERVER['HTTP_IF_MODIFIED_SINCE'] < strtotime('+1 hour')) {
        return 304;
    }
    header('HTTP/1.1 304 Not Modified');
    return 200;
}

      } ```

      在上述配置中，我们首先设置了Cache-Control头部的max-age为1小时，然后在Expires头部设置了响应内容的缓存时间为1小时。在请求内容包含<script>标签时，我们检查HTTP_IF_MODIFIED_SINCE头是否为当前时间，如果不是，则返回304状态码，表示资源已经过期。

      请注意，不同的Nginx版本可能需要使用不同的方法来设置缓存控制和缓存令牌。如果你的项目使用的是较早的Nginx版本，可能需要使用cache-control头部和Expires头部，而如果你的项目使用的是较新的Nginx版本，可能需要使用Cache-Control头部和Cache-Control-TTL头部，其中Cache-Control-TTL头部表示缓存令牌的有效时间。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部