目次场景：前端vue3网站项目使用wepack打包后举行摆设，但是用户浏览器访问网站时加载了缓存，导致没有及时更新。 如今需要一个办理方案包管每次重新打包摆设后，用户浏览器访问网站重新加载js和css，但是未更新还是继续使用缓存加速加载速度。 1、配置nginx不缓存index.htmlindex.html文件很小，不缓存的话也不会造成很大影响 [code]server { listen 80; server_name yourdomain.com; location / { try_files $uri $uri/ /index.html; root /yourdir/; index index.html index.htm; //对html htm文件设置永远不缓存 if ($request_filename ~* .*\.(?:htm|html)$) { add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy- revalidate"; } } }[/code]2、配置vue.config.js项目webpack为js和css文件增长引用版本号打包后index.html中引用js和css文件都会带上 ?v=时间戳 如许js和css更新后由于时间戳不一样，会重新加载文件 [code]const timestamp = new Date().getTime() module.exports = defineConfig({ css: { extract: { // 修改输出css目次名及文件名 filename: `css/[name].css?v=${timestamp}`, chunkFilename: `css/[name].css?v=${timestamp}`, } }, configureWebpack: { output: { // 修改输出js目次名及文件名 filename: `js/[name].js?v=${timestamp}`, chunkFilename: `js/[name].js?v=${timestamp}`, }, }, })[/code]3、如果是vite.config.js那么需要在defineConfig下加上配置 [code]build: { // outDir: "admin", //想要把dist修改成什么名字在这边改 // 自定义底层的 Rollup 打包配置（Rollup文档地点：https://cn.rollupjs.org/configuration-options/） rollupOptions: { // 输出配置 output: { // 输出的文件自定义命名 chunkFileNames: `js/[name]-[hash].${timestamp}.js`, entryFileNames: `js/[name]-[hash].${timestamp}.js`, assetFileNamesL: `[ext]/[name]-[hash].${timestamp}.[text]`, } }, },[/code]总结到此这篇关于vue前端更新后需要清空缓存的文章就介绍到这了,更多相关vue前端更新清空缓存内容请搜索脚本之家从前的文章或继续浏览下面的相关文章希望各人以后多多支持脚本之家！ 来源：https://www.jb51.net/javascript/328984jc1.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 03:30 , Processed in 0.044315 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
