vue项目 npm run build 打包项目防止浏览器缓存的操作方法

 更新时间:2022年08月09日 11:24:56   作者:船长在船上  
这篇文章主要介绍了vue项目 npm run build 打包项目防止浏览器缓存的操作方法,本文给大家推荐两种方法,每种方法通过实例代码给大家介绍的非常详细,需要的朋友可以参考下

在vue.config.js配置

推荐方法1:

const Timestamp = new Date().getTime()

module.exports = {
    ......
    configureWebpack: config => {
        
            config.output.filename = `js/[name].${Timestamp}.js`
            config.output.chunkFilename = `js/[name].${Timestamp}.js`
        
    },
    ......
    
    css: {
        ......
        extract: {
            filename: `css/[name].${Timestamp}.css`,
            chunkFilename: `css/[name].${Timestamp}.css`
        }
        ......
    }
}

 方法2:index.html页面添加

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

这样添加会导致了用户每次访问你的程序时都要重新请求服务器,所有的静态资源都无法用缓存了,浪费流量,网络压力变大。

到此这篇关于vue项目 npm run build 打包项目防止浏览器缓存的操作方法的文章就介绍到这了,更多相关vue npm run build 打包项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue2中使用less简易教程

    vue2中使用less简易教程

    这篇文章主要介绍了vue2中使用less简易教程,由于不需要手动配置webpack,所以vue中使用less是非常简单的,只需要安装less,less-loadder就ok了
    2018-03-03
  • Vue2.0在IE11版本浏览器中的兼容性问题

    Vue2.0在IE11版本浏览器中的兼容性问题

    这篇文章主要介绍了Vue2.0在IE11版本浏览器中的兼容性问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue-cli3环境变量与分环境打包的方法示例

    vue-cli3环境变量与分环境打包的方法示例

    这篇文章主要介绍了vue-cli3环境变量与分环境打包的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • ant-design-vue 实现表格内部字段验证功能

    ant-design-vue 实现表格内部字段验证功能

    这篇文章主要介绍了ant-design-vue 实现表格内部字段验证功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • vue3 vite pinia配置动态路由、解决刷新页面路由消失的问题

    vue3 vite pinia配置动态路由、解决刷新页面路由消失的问题

    这篇文章主要介绍了vue3 vite pinia配置动态路由、解决刷新页面路由消失的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue中KeepAlive内置缓存使用详解

    Vue中KeepAlive内置缓存使用详解

    KeepAlive 是 vue 中的内置组件,当多个组件动态切换时可以对实例状态进行缓存,本文就来详细的介绍一下Vue中KeepAlive内置缓存使用,感兴趣的可以了解一下
    2023-10-10
  • 浅析vue插槽和作用域插槽的理解

    浅析vue插槽和作用域插槽的理解

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不现实、以及怎样显示由父组件来决定。这篇文章主要介绍了浅析vue插槽和作用域插槽的理解,需要的朋友可以参考下
    2019-04-04
  • vue项目引入ts步骤(小结)

    vue项目引入ts步骤(小结)

    这篇文章主要介绍了vue项目引入ts步骤(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue用vis插件如何实现网络拓扑图

    vue用vis插件如何实现网络拓扑图

    这篇文章主要介绍了vue用vis插件如何实现网络拓扑图,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue虚拟化列表封装的实现

    vue虚拟化列表封装的实现

    这篇文章主要介绍了vue实现虚拟化列表封装方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06

最新评论