vue项目打包部署后 浏览器自动清除缓存问题（解决方法）

在 Vue 项目中，打包部署后浏览器自动清除缓存的问题通常出现在以下几种情况：

1. Hash 模式 vs History 模式：在使用 Vue Router 的 History 模式时，如果没有正确配置服务器，可能会导致浏览器缓存问题。
2. 缓存策略：静态资源（如 CSS、JavaScript 文件等）的缓存策略不当也会导致缓存问题。
3. 服务端配置：服务器的配置不当，如缺少对静态资源的缓存控制头等。

解决方法

1. 使用 Hash 模式或正确配置 History 模式

如果你使用的是 Vue Router 的 History 模式，确保你的服务器正确配置了 fallback 机制。这可以确保当用户刷新页面或直接访问某个路由时，服务器能够正确地返回 index.html 文件。

示例：Nginx 配置

location / {
  try_files $uri $uri/ /index.html;
}

示例：Apache 配置

<Directory "/path/to/your/vue/app/dist">
  Options Indexes FollowSymLinks MultiViews
  AllowOverride All
  Order allow,deny
  allow from all
</Directory>

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

2. 添加版本号或指纹（Hash）到静态资源

为了避免浏览器缓存旧版本的静态资源，你可以通过添加版本号或指纹（Hash）来区分不同版本的资源。

示例：Webpack 配置

在 Vue 项目中，通常使用 Webpack 来构建项目。可以通过以下配置来为静态资源添加指纹：

// vue.config.js
module.exports = {
  configureWebpack: {
    output: {
      filename: '[name].[contenthash].js',
      chunkFilename: '[name].[contenthash].js',
    },
  },
  css: {
    extract: {
      filename: '[name].[contenthash].css',
    },
  },
};

3. 配置服务器缓存策略

通过设置 HTTP 响应头来控制缓存策略，可以避免不必要的缓存问题。

示例：Nginx 配置

location ~* \.(jpg|jpeg|gif|png|css|js|ico|xml)$ {
  expires 30d;
  add_header Cache-Control "public, must-revalidate, proxy-revalidate";
}

location / {
  try_files $uri $uri/ /index.html;
}

示例：Apache 配置

<FilesMatch "\.(jpg|jpeg|gif|png|css|js|ico|xml)$">
  Header set Cache-Control "public, must-revalidate, proxy-revalidate"
  Header set Expires "access plus 30 days"
</FilesMatch>

4. 使用 Service Worker

Service Worker 可以帮助你更好地控制缓存策略，提供离线访问能力，并且可以拦截网络请求，控制缓存和更新资源。

示例：注册 Service Worker

在 main.js 文件中注册 Service Worker：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then(registration => {
      console.log('Service Worker registered:', registration);
    }).catch(error => {
      console.log('Service Worker registration failed:', error);
    });
  });
}

示例：Service Worker 脚本

创建 service-worker.js 文件来控制缓存：

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/static/css/app.css',
        '/static/js/app.js',
        // 添加其他需要缓存的资源
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});