VUE的缓存题目
解决 Vue 缓存题目通常是为了确保用户访问最新版本的应用程序，而不会被浏览器和飞书的缓存所困扰。以下是针对使用 Webpack 和 Vite 脚手架的解决方案：1. 增长文件指纹 (Hashing)
通过文件名添加 hash，确保文件更新后，文件名发生变革，浏览器会重新加载新文件。
Webpack
[*] 在 Webpack 的配置文件vue.config.js中设置 output.filename 和 output.chunkFilename，添加 hash：
module.exports = {
configureWebpack: {
output: {
filename: 'js/..js', // 主文件加 hash
chunkFilename: 'js/..js', // 分包文件加 hash
},
},
}; Vite
[*] 默认情况下，Vite 会在构建时为静态资源文件添加 hash，无需额外配置。
[*] 假如必要调整输出文件路径或文件名，可在 vite.config.js 中配置：
export default defineConfig({
build: {
rollupOptions: {
output: {
entryFileNames: 'assets/js/..js',
chunkFileNames: 'assets/js/..js',
assetFileNames: 'assets//..',
},
},
},
}); 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,
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]