Vue项目部署，清理缓存

最新推荐文章于 2024-09-11 10:48:46 发布

敢问

最新推荐文章于 2024-09-11 10:48:46 发布

阅读量530

点赞数

分类专栏： VUE 文章标签： vue.js 缓存前端

本文链接：https://blog.csdn.net/weixin_41040445/article/details/125781086

版权

VUE 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

本文档介绍了Vue项目的配置细节，包括根目录`index.html`的设置，以及`vue.config.js`中关于CSS和JS文件的命名和版本控制。通过设置HTTP头部防止缓存，并配置Webpack实现动态版本号，确保每次更新都能获取最新资源。

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

配置根目录index.html

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

配置vue.config.js

const Version = new Date().getTime()

module.exports = {
	css: {
	    loaderOptions: {
	      sass: {
	        data: `@import "@/components/themes/_handle.scss";`
	      }
	    },
	    // 是否使用css分离插件 ExtractTextPlugin
	    extract: {
	      // 修改打包后css文件名
	      filename: `static/css/[name].${Version}.css`,
	      chunkFilename: `static/css/[name].${Version}.css`
	    }
	 },
	 configureWebpack: {
		 output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
		      // filename: utils.assetsPath('js/[name].[chunkhash].'+Version+'js'),
		      // chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Version+'js')
		      filename: `static/js/[name].${Version}.js`,
		      chunkFilename: `static/js/[name].${Version}.js`
		    }
	},
	chainWebpack(config) {
		// img的文件名修改
	    config.module
	      .rule('images')
	      .use('url-loader')
	      .tap(options => {
	        options.name = `static/img/[name].${Version}.[ext]`
	        options.fallback = {
	          loader: 'file-loader',
	          options: {
	            name: `static/img/[name].${Version}.[ext]`
	          }
	        }
	        return options
	      })
	}
}