针对“vue多次打包后出现浏览器缓存的问题及解决”这个问题，我们可以采取以下两种方案：
方案一：添加hash
每次打包时，为打包的静态资源文件添加hash，这样即使文件内容不变，文件名字也会发生变化，避免浏览器缓存问题。
- 在vue.config.js配置文件中设置
filenameHashing: true。
module.exports = {
filenameHashing: true, // 开启文件名哈希值
// ...
}
- 在项目中引用静态资源时，使用 Vue CLI 自动生成的资源路径（如使用
import导入的 CSS 文件）, 这样打包时，Vue CLI 会自动为静态资源添加哈希值。
<template>
<div>
<img src="./assets/logo.png">
</div>
</template>
这样就可以避免浏览器缓存问题了。
方案二：通过修改文件名来解决缓存问题
如果你的项目不能使用哈希的方式解决缓存问题，那么可以考虑通过修改静态资源的文件名来解决缓存问题。
- 在 vue.config.js 配置文件中设置 configureWebpack 选项，使用 webpack-rename-assets-plugin 插件，来为静态资源文件修改文件名。
const RenamePlugin = require('webpack-rename-assets-plugin')
module.exports = {
configureWebpack: {
plugins: [
new RenamePlugin({
originNameReg: /app.(.*).js/, // 匹配这个正则表达式的文件名
targetName: 'app.[hash].js', // 将文件名替换成这个
})
]
}
}
- 在 html 模板页面中引用修改后的文件名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="/css/app.[hash].css"> <!-- 引用修改后的文件名 -->
</head>
<body>
<div id="app"></div>
<script src="/js/app.[hash].js"></script> <!-- 引用修改后的文件名 -->
</body>
</html>
这样，每次打包时，静态资源文件名会发生变化，就不会遇到浏览器缓存的问题。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue多次打包后出现浏览器缓存的问题及解决 - Python技术站
微信扫一扫 
支付宝扫一扫 