当前位置:首页 > 经验笔记 > VUE > 正文内容

vue 用webpack 打包的时候添加版本号, VUE 项目更新部署时,浏览器页面缓存问题

han32683年前 (2022-07-12)VUE5212

因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。

module.exports = {
  //给js添加版本号
  configureWebpack:(config) => {
      config.output.filename = `static/js/[name].${version}.js`;
      config.output.chunkFilename = `static/js/[name].${version}.js`
  },
  //给css添加版本号
  chainWebpack: config => {
       // 清除css,js版本号
       // config.output.filename('static/js/[name].js').end();
       // config.output.chunkFilename('static/js/[name].js').end();
       // 为生产环境修改配置...
       config.plugin('extract-css').tap(args => [{
            filename: `static/css/[name].${version}.css`,
            chunkFilename: `static/css/[name].${version}.css`
       }])
  }
...
}


扫描二维码推送至手机访问。

版权声明:本文由瀚文博客发布,如需转载请注明出处。

本文链接:https://www.hanwenblog.com/post/68.html

分享给朋友:

相关文章

vue中实现点击按钮滚动到页面对应位置 使用css3平滑属性实现

vue中实现点击按钮滚动到页面对应位置 使用css3平滑属性实现

vue项目中,需要实现点击对应按钮,滚动到对应页面位置,下面分享一个简单实用的方法<template>   <div class="box&...

element中el-switch开关点击弹出确认框 阻止默认的el-switch 的点击事件 发送请求成功后才改变状态

element中el-switch开关点击弹出确认框 阻止默认的el-switch 的点击事件 发送请求成功后才改变状态

Switch 开关表示两种相互对立的状态间的切换,多用于触发「开/关」。常见用法: 1、绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactiv...

在vue中实现element-ui的el-dialog弹框拖拽

1.在assets/js/文件夹下新建directives.js 文件:import Vue from 'vue' // v-dialog...

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

安装:Bashnpm install --save clipic使用代码:Markup<template>     ...

VUE computed和watch的区别最简化

VUE computed和watch的区别最简化

<!DOCTYPE html> <html lang="en"> <head>    &...