vue项目上线后页面空白报错找不到js或者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`
		}
	}
}