vue cli3基于时间戳清除浏览器缓存

最新推荐文章于 2025-03-24 09:11:37 发布

原创最新推荐文章于 2025-03-24 09:11:37 发布 · 609 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

3 篇文章

订阅专栏

该博客介绍了一个基于Vue的项目配置，通过在webpack中引入mini-css-extract-plugin并生成时间戳，实现了每次发布后自动更新js和css文件名，从而避免因浏览器缓存导致的页面错误和接口调用失败。主要步骤包括：生成时间戳、指定文件名添加时间戳、更改输出路径和打包地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

操作指南

1.问题描述

基于vue的项目在每次发布后，需手动清除浏览器缓存，才能显示最新的页面与调用最新的接口，否则页面出错，函数调用不成功。

2.生成时间戳

const Timestamp = new Date().getTime();

2.引入mini-css-extract-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

3.指定js文件地址与文件名添加时间戳

output: {
		//修改打包后js名：名称 + 时间戳
          filename: `static/js/[name].${Timestamp}.js`,
          chunkFilename: `static/js/[name].${Timestamp}.js`
        }

4.指定css文件地址与文件名添加时间戳

plugins: [
      new MiniCssExtractPlugin({
        // 修改打包后css文件名：名称 + 时间戳
        filename: `static/css/[name].${Timestamp}.css`,
        chunkFilename: `static/css/[name].${Timestamp}.css`
      }),
    ],

5.更改其更改路径，输出路径，打包地址

	publicPath: './',//公共路径
    outputDir: 'dist',//打包文件名称
    assetsDir: 'static'//css、js、img资源打包路径地址

6.全部代码

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Timestamp = new Date().getTime();
// 使用等比适配插件
module.exports = {
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({
        // 修改打包后css文件名
        filename: `static/css/[name].${Timestamp}.css`,
        chunkFilename: `static/css/[name].${Timestamp}.css`
      }),
    ],
    output: {
          filename: `static/js/[name].${Timestamp}.js`,
          chunkFilename: `static/js/[name].${Timestamp}.js`
        }
    },
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static'
}