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,
}

相关推荐
dy17175 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂4 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技4 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip4 小时前
JavaScript二叉树相关概念
前端
attitude.x5 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java5 小时前
CSS3核心技术
前端·css·css3
ChinaRainbowSea6 小时前
7. LangChain4j + 记忆缓存详细说明
java·数据库·redis·后端·缓存·langchain·ai编程
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5