vue项目解决发包浏览器缓存问题

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~

问题描述

当程序版本升级时，用户因为缓存访问的还是老的页面，不会自动更新修改的的文件

解决方案

两种解决方案均可

1. nginx

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, no-store";  //对html文件设置永远不缓存
        }      
      }
}

• no-cache
  数据内容不能被缓存, 每次请求都重新访问服务器, 若有max-age（最大缓存期）, 则缓存期间不访问服务器
• no-store
  不仅不能缓存, 连暂存也不可以(即: 临时文件夹中不能暂存该资源)

2. vue.config.js

let timeStamp = new Date().getTime();
configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config.output.filename = `js/[name].${timeStamp}.js`
            config.output.chunkFilename = `js/[name].${timeStamp}.js`
         }
    },
css: {
        extract: { 
            ignoreOrder: true,
            filename: `css/[name].${timeStamp}.css`,
            chunkFilename: `css/[name].${timeStamp}.css`,
        }
    },  

 

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~