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

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'
}