标签：index 缓存 version html js vue 报错 css

项目上线后，浏览器出现白屏在控制台报错找不到文件，如下：

但是在强制刷新后，页面显示恢复正常，报错也消失，由此判断可能是浏览器缓存的问题，
经查询相关资料，找到以下几种清除缓存的方式

一、修改根目录index.html

在 head 里面添加下面代码 其中meta的作用

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

这种会让所有的css/js资源重新加载

二、配置 nginx 不缓存 html

vue默认配置，打包后css和js的名字后面都加了哈希值，不会有缓存问题。但是index.html在服务器端可能是有缓存的，需要在服务器配置不让缓存index.html

server {
  listen 80;
  server_name test.exmaple.cn;

  location / {
    if ($request_filename ~* .*\.(?:htm|html)$)  # 设置页面不缓存以 html、htm 结尾的文件
    {
      add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
    }
    //no-cache浏览器会缓存，但刷新页面或者重新打开时 会请求服务器，服务器可以响应304，如果文件有改动就会响应200
    //no-store浏览器不缓存，刷新页面需要重新下载页面
    root /web/;
    index index.html;
    try_files $uri $uri/ /index.html =404;
  }
}

三、打包的文件路径添加其他参数

在 vue-cli3.x 创建的项目里，打开 vue.config.js 文件

const version = new Date().getTime(); // 时间戳、随机数等都可以
module.exports = {
  	outputDir: 'dist', //打包的时候生成的一个文件名
	lintOnSave: false,
  	productionSourceMap: false,
  	css: {
	    loaderOptions: {
	      sass: {
	        data: `@import "@/components/themes/_handle.scss";`
	      }
	    },
	    // 是否使用css分离插件 ExtractTextPlugin
	    extract: {
	      // 修改打包后css文件名   // css打包文件，添加时间戳
	      filename: `css/[name].${version}.css`,   
	      chunkFilename: `css/[name].${version}.css`
	    }
	 },
  	configureWebpack: {
		output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
		     filename: `js/[name].[chunkhash].${version}.js`,
		     chunkFilename: `js/[id].[chunkhash].${version}.js`
		}
	}
}

标签：index,缓存,version,html,js,vue,报错,css
来源： https://www.cnblogs.com/axingya/p/16493262.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。