首页 > 其他分享 >vue怎么设置html不缓存 但是js、css等文件做缓存

vue怎么设置html不缓存 但是js、css等文件做缓存

时间:2024-05-06 18:13:44浏览次数:26  
标签:文件 缓存 配置 html js webpack HTML

在 Vue.js 项目中,我们通常使用 webpack 打包工具进行编译构建,其中 HTML 文件通常不做缓存,而 JS、CSS 文件需要做缓存。这可以通过 webpack 的配置实现。下面是针对你的问题的步骤:

1. 打开 webpack 的配置文件 webpack.config.js 或者 webpack.prod.config.js(如果你的项目是基于 vue-cli 搭建的,可能需要修改 vue.config.js 文件)
2. 为了让 JS、CSS 文件在每次编译后都产生新的文件名防止浏览器缓存,我们需要对 output 配置做如下修改:

```javascript
output: {
  filename: '[name].[chunkhash].js',
  chunkFilename: '[id].[chunkhash].js'
}
```
上面的配置确保每次编译后产生新的文件名,"[chunkhash]"是根据文件内容计算出来的 hash ,内容不变则 hash 不变,所以有效避免了浏览器缓存。

3. 对于 CSS ,我们需要使用 ExtractTextPlugin 插件,同样在其配置中加入内容哈希:

```javascript
new ExtractTextPlugin('[name].[contenthash].css')
```

4. HTML 文件不缓存,首先我们需要知道,一般来说,HTML 是没有做浏览器缓存的,除非你在服务器配置了强制缓存。如果你的服务器对 HTML 文件配置了强制缓存,你需要修改服务器的配置,设置 no-cache 或 must-revalidate 来禁止 HTML 文件的缓存。

5. 其次,如果你使用了 webpack 的 HtmlWebpackPlugin 插件来生成 HTML 文件,你需要确保这个插件的配置中没有设置缓存。如果有的话,你需要关闭这个配置:

```javascript
new HtmlWebpackPlugin({
  ...,
  cache: false
})
```

以上就是在 Vue.js 中设置 HTML 不缓存,而 JS、CSS 文件做缓存的具体方法。

标签:文件,缓存,配置,html,js,webpack,HTML
From: https://www.cnblogs.com/bigcrank/p/18175557

相关文章

  • 使用 VS Code 调试 Vue.js 项目
    Vite如果是通过create-vue创建的项目,则修改vite.config.ts配置文件,在开发环境生成sourcemap文件。exportdefaultdefineConfig({build:{sourcemap:true,},//otherconfigs...});更多配置,请参考:https://vitejs.dev/config/build-options.html#build-s......
  • vue实现使用JSZip批量下载图片
    1importJSZipfrom"jszip";2import{saveAs}from'file-saver';3import$from'jquery'45//jszip打包下载图片6functionsaveImgZip(imgUrlArrs,typeTxt){7varimgUrlArr=[];//图片列表8imgUrlArr=imgUrlAr......
  • redis自学(41)JVM进程缓存
      前置数据库的表规划:数据库的表尽量做分离,是因为一个商品的数据事实上是非常多的,需要对商品的数据进行解耦,字段太多查询的效率会比较低;另一方面,系统需要给数据加缓存,如果都在一张表里,那么作为缓存的话,就只有一整条数据作为缓存,一旦一条数据里的任意一个字段做了修改,整个商品......
  • HTML & CSS – Styling Scrollbar
    前言Scrollbar能styling的东西不多,但有时候不得不styling。这里记入我自己在项目中修改过的scrollbar经历。 GmailScrollbar Gmail的scrollbar就改过style。   ......
  • JS进阶(二)DOM
    1.DOM(DocumentObjectModel)文档对象模型js中对象的分类有三种:用户定义对象内建对象ArrayDateMath等宿主对象(由浏览器创建的对象)modelmap可以将DOM看成一棵“树”。DOM把文档看做一棵家谱树,parent、child、sibling等。整个html文档,会保存一个文档对象document......
  • Vue3 除了 keep-alive,还有哪些页面缓存的实现方案
    引言有这么一个需求:列表页进入详情页后,切换回列表页,需要对列表页进行缓存,如果从首页进入列表页,就要重新加载列表页。对于这个需求,我的第一个想法就是使用keep-alive来缓存列表页,列表和详情页切换时,列表页会被缓存;从首页进入列表页时,就重置列表页数据并重新获取新数据来达到列表......
  • JS转义html编码
    两个方法:1、利用用浏览器内部转换器实现html转义;2、用正则表达式实现html转义; varHtmlUtil={/*1.用浏览器内部转换器实现html编码(转义)*/htmlEncode:function(html){//1.首先动态创建一个容器标签元素,如DIVvartemp=docum......
  • 经验之谈:我为什么选择了这样一个激进的缓存大Key治理方案
    一、引言本文将结合我的一次Redis大Key的治理经验,来浅谈一下缓存大Key的治理方案选择。文中主要包括缓存大Key基础知识、大Key治理方案选择、大Key治理案例等,适合有一定开发经验的开发者阅读,希望对大家有帮助。二、缓存大Key基础知识2.1大Key的标准集合类型元素数量>5000或者......
  • go高并发之路——缓存击穿
    缓存击穿,Redis中的某个热点key不存在或者过期,但是此时有大量的用户访问该key。比如xxx直播间优惠券抢购、xxx商品活动,这时候大量用户会在某个时间点一同访问该热点事件。但是可能由于某种原因,redis的这个热点key没有设置,或者过期了,那么这时候大量高并发对于该key的请求就得不到red......
  • JS实现获取当前URL和来源URL的方法
    通用模式:Javascript正常取来源网页的URL只要用:index.html:<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=......