VUE的缓存问题

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

1. 增加文件指纹 (Hashing)

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

Webpack
  • 在 Webpack 的配置文件vue.config.js中设置 output.filenameoutput.chunkFilename,添加 hash:
javascript 复制代码
module.exports = {
    configureWebpack: {
        output: {
            filename: 'js/[name].[hash].js', // 主文件加 hash
            chunkFilename: 'js/[name].[hash].js', // 分包文件加 hash
        },
    },
};
Vite
  • 默认情况下,Vite 会在构建时为静态资源文件添加 hash,无需额外配置。

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

javascript 复制代码
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
bash 复制代码
npm install clean-webpack-plugin --save-dev
  • 在每次构建时清理旧的构建文件。
javascript 复制代码
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    plugins: [
        new CleanWebpackPlugin(),
    ],
};
Vite 的 build.clean
  • Vite 构建默认会清理输出目录,但可以通过 build.emptyOutDir 来控制。
javascript 复制代码
build: {
  emptyOutDir: true,
}

相关推荐
灿灿121386 分钟前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴24 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack42 分钟前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669131 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx1 小时前
前端-CSS-day1
前端·css
知否技术1 小时前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
盛夏绽放1 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
幼儿园技术家1 小时前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好2 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝2 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css