首页 > 其他分享 >vue cli 解决浏览器缓存问题

vue cli 解决浏览器缓存问题

时间:2023-08-10 12:02:45浏览次数:41  
标签:缓存 cli Timestamp js vue config css name

在vue打包时会遇到前端明明发布了,但是浏览器却没有更新。需要强制刷新才能看到最新的内容。

解决方法一

加时间戳后缀

在 vue.config.js 的文件中加入

const Timestamp = new Date().getTime();
module.exports = {
  configureWebpack: { // webpack 配置
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      config.output.filename('js/[name].' + Timestamp + '.js').end(); 
    config.output.chunkFilename('js/[name].' + Timestamp + '.js').end(); 
    config.plugin('extract-css')
			//拼接起来
      .tap(args => [{ 
      filename: `css/[name].${Timestamp}.css`, 
      chunkFilename: `css/[name].${Timestamp}.css` }
    ])
    },
  },

}

解决方法二

删除dist包

在 vue.config.js 的文件中加入

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
configureWebpack:{
    plugins: [
            new CleanWebpackPlugin()
        ],
  
}

记得npm install CleanWebpackPlugin 安装插件

标签:缓存,cli,Timestamp,js,vue,config,css,name
From: https://blog.51cto.com/u_16204378/7032924

相关文章

  • 使用vue+openLayers开发离线地图以及离线点位的展示
    1.下载引入到需要的组件中npminstallol2.需要用到的api...(根据开发需求以及实际情况进行引入)importolfrom"ol";import"ol/ol.css";importMapfrom"ol/Map";importViewfrom"ol/View";importFeaturefrom"ol/Feature";importPoin......
  • abp-vnext-pro 实战(六,vue 前端状态pinia)
    在login的时候把所有写入全局store,console.log('----------------从数据库获取字典--------------------');constappStore=useAppStore();constdataDictionaryServiceProxy=newDataDictionaryServiceProxy();constdetailInput=new......
  • Vue 自定义组件
    下面有一个例子。<template><el-input:value="value"@click.native="select"readonly><iclass="el-icon-circle-close"slot="suffix"@[email protected]="clear"/>&l......
  • vue+django跨域问题
    解决办法:MIDDLEWARE=['corsheaders.middleware.CorsMiddleware','yshop.middleware.AuthorizeMiddleware','django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware�......
  • 在Vue中可以使用方括号法获得想要的对象数据吗?
    1.问题Document{{message}}{{school.name}}{{school[mobile]}}在这里{{school.name}}{{school[mobile]}}不可以使用方括号法获得想要的对象数据吗?2.解决在Vue.js中,使用双花括号({{}})来插值数据是正确的,但是方括号法([])用于动态属性访问的方式是不适......
  • avue-crud属性配置项参数笔记分享
     Avue是一个基于Element-plus低代码前端框架,它使用JSON配置来生成页面,可以减少页面开发工作量,极大提升效率;虽然Avue官网上面都有这些配置说明,但是如果刚开始接触不熟悉框架的话需要很久才找到自己需要的参数配置,为了方便自己今后查找使用,现将一些开发中常用的配置梳理在下......
  • vue启用https服务及nginx启用https配置
    1.vue开发环境中主要是configjs配置启用https服务devServer:{https:true,//启用https} 2.nginx 申请一个ssl证书,自行申请。 下面是一个nginx例子 需要修改的配置https主要是红色标出来部分。蓝色加粗部分主要是history模式下刷新出现404的解决办法ser......
  • vue3 + vite + vue-router 4.x项目在router文件中使用pinia报错
    1.背景vue-router4.x版本,想在路由文件中引入并使用pinia后报错如下:表面意思是getActivePinia()方法在pinia还没有激活的时候被调用,导致报错。2.解决方法在stores文件夹下新建pinia.js文件,用来引入并创建pinia实例。import{createPinia}from"pinia";const......
  • powercli脚本根据模版批量创建虚拟机
    catVM.csvName,Template,PhysicalHost,Datastore,Networkmgt,Networkpro,IPV4mgt,Cpu,Memory,DISK,Usage,cdirp1_caiwu_web001,win2016,10.18.44.13,NAS03,P1_MGT_9,P1_PRO_c1_1109,10.10.124.130,6,32,350,Safe-app,caiwuchufunctionConnectToVCenter{param(......
  • C99 Clion 项目目录结构 CMakeLists.txt
    简单helle目录如下.├──CMakeLists.txt├──hello│  └──hello.c└──main.cmain.c#include"hello//hello.c"intmain(){print_hello();return0;}hello.c#include<stdio.h>staticvoidprint_hello();voidprint_hello(){pr......