VUE的缓存题目

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

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

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

1. module.exports = {
2.     configureWebpack: {
3.         output: {
4.             filename: 'js/[name].[hash].js', // 主文件加 hash
5.             chunkFilename: 'js/[name].[hash].js', // 分包文件加 hash
6.         },
7.     },
8. };

复制代码

Vite

• 默认情况下，Vite 会在构建时为静态资源文件添加 hash，无需额外配置。
  
• 假如必要调整输出文件路径或文件名，可在 vite.config.js 中配置：
  

1. export default defineConfig({
2.   build: {
3.     rollupOptions: {
4.       output: {
5.         entryFileNames: 'assets/js/[name].[hash].js',
6.         chunkFileNames: 'assets/js/[name].[hash].js',
7.         assetFileNames: 'assets/[ext]/[name].[hash].[ext]',
8.       },
9.     },
10.   },
11. });

复制代码

---

2. 构建时清空构建目录

由于js增长了Hash，因此必要每次build时对构建目录进行清算。
Webpack 的 clean-webpack-plugin

• 先安装clean-webpack-plugin
  

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

复制代码

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

1. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
2. module.exports = {
3.     plugins: [
4.         new CleanWebpackPlugin(),
5.     ],
6. };

复制代码

 
Vite 的 build.clean

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

1. build: {
2.   emptyOutDir: true,
3. }

复制代码

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。