Vue项目部署，清理缓存方式

最新推荐文章于 2024-07-27 10:28:51 发布

s先生的d小姐

最新推荐文章于 2024-07-27 10:28:51 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： vue.js 缓存 webpack

本文链接：https://blog.csdn.net/weixin_44326389/article/details/121746710

版权

Vue Webpack 缓存文件命名时间戳

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

1.index.html

<!--清除浏览器中的缓存 -->
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

2.vue.config.js

const timeUpdate  = new Date().getTime();
module.exports = {
  // 解决发布生产以后有缓存的问题
  // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
  //一般情况下，该方法就能解决。
  configureWebpack: {
    output: {
      filename: `[name].js?v=${timeUpdate}`,
      chunkFilename: `[name].js?v=${timeUpdate}`
    },
  },
  // 修改打包后css文件名
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/components/themes/_handle.scss";`
      }
    },
    // 是否使用css分离插件 ExtractTextPlugin
    extract: {
      filename: `static/css/[name].${timeUpdate}.css`,
      chunkFilename: `static/css/[name].${timeUpdate}.css`
    }
  },
  // webpack-chain (链式操作)这个库提供了一个 webpack 原始配置的上层抽象，
  // 使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。
  // 它允许我们更细的控制其内部配置。
  chainWebpack(config) {
		// img的文件名修改
	    config.module
	      .rule('images')
	      .use('url-loader')
	      .tap(options => {
	        options.name = `static/img/[name].${timeUpdate}.[ext]`
	        options.fallback = {
	          loader: 'file-loader',
	          options: {
	            name: `static/img/[name].${timeUpdate}.[ext]`
	          }
	        }
	        return options
	      })
	},
};