VUE的缓存问题

解决 Vue 缓存问题通常是为了确保用户访问最新版本的应用程序，而不会被浏览器和飞书的缓存所困扰。以下是针对使用 Webpack 和 Vite 脚手架的解决方案：

1. 增加文件指纹 (Hashing)

通过文件名添加 hash，确保文件更新后，文件名发生变化，浏览器会重新加载新文件。

Webpack

• 在 Webpack 的配置文件vue.config.js中设置 output.filename 和 output.chunkFilename，添加 hash：

module.exports = {
    configureWebpack: {
        output: {
            filename: 'js/[name].[hash].js', // 主文件加 hash
            chunkFilename: 'js/[name].[hash].js', // 分包文件加 hash
        },
    },
};

Vite

• 默认情况下，Vite 会在构建时为静态资源文件添加 hash，无需额外配置。

• 如果需要调整输出文件路径或文件名，可在 vite.config.js 中配置：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/js/[name].[hash].js',
        chunkFileNames: 'assets/js/[name].[hash].js',
        assetFileNames: 'assets/[ext]/[name].[hash].[ext]',
      },
    },
  },
});

---

2. 构建时清空构建目录

由于js增加了Hash，因此需要每次build时对构建目录进行清理。

Webpack 的 clean-webpack-plugin

• 先安装clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

•  在每次构建时清理旧的构建文件。

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    plugins: [
        new CleanWebpackPlugin(),
    ],
};

 

Vite 的 build.clean

• Vite 构建默认会清理输出目录，但可以通过 build.emptyOutDir 来控制。

build: {
  emptyOutDir: true,
}

---