vue-cli3 打包防止浏览器缓存

最新推荐文章于 2024-09-25 15:23:22 发布

木叶随风而逝

最新推荐文章于 2024-09-25 15:23:22 发布

阅读量1.3k

点赞数 3

文章标签： vue.js 缓存 javascript

本文链接：https://blog.csdn.net/qq_39041201/article/details/123209761

版权

本文介绍了如何在Vue项目的vue.config.js配置文件中，通过添加时间戳到CSS和JS文件名来防止浏览器缓存。配置包括修改输出文件名，确保每次部署时文件名变化，从而强制浏览器获取最新版本的资源。

摘要由CSDN通过智能技术生成

采用css、js文件名添加时间戳的方式，来防止发布时浏览器进行文件缓存。

在vue.config.js文件中配置以下代码即可

const TimeStamp  = new Date().getTime();
module.exports = {
	devServer: {
		// 指定项目启动时的默认端口号
		port: 8081
	},
  publicPath: './',
	configureWebpack: {
		devtool: 'source-map',
    output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.js】
      filename: `js/[name].${TimeStamp}.js`,
      chunkFilename: `js/[name].${TimeStamp}.js`
    },
	},
  css: {
    extract: {
      // 修改打包后css文件名   // css打包文件，添加时间戳
      filename: `css/[name].${TimeStamp}.css`,   
      chunkFilename: `css/[name].${TimeStamp}.css`
    }
  }
};