vue项目打包后,由于html被缓存导致出现白屏的处理方案

当 Vue 项目部署到线上服务器时，我们可能会遇到“白屏”问题，此现象通常是由于浏览器缓存的 HTML 文件。为了解决这种问题，我们可以尝试以下几种处理方案：

1. 在 index.html 中设置 meta 标签

在 index.html 文件的 head 标签里添加如下代码，告诉浏览器不要缓存：

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Expires" content="0">

这种做法可以确保每次访问网站都能从服务器获取最新的页面，但是会增加服务器的负担。

2. 配置webpack的HtmlWebpackPlugin插件

我们可以使用 html-webpack-plugin 也可以解决这个问题。这个插件可以根据我们指定的模板生成 HTML 文件，并注入打包后的 JS 文件。我们可以在插件的配置中指定生成的 HTML 文件的文件名和路径，以及指定该文件的缓存策略，例如：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // ...
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html',
            inject: true,
            hash: true,
            cache: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            }
        })
    ]
}

这里指定了生成的 HTML 文件名为 index.html，并将 HTML 文件模板位置设置为 src/index.html，另外还将 hash 设为 true，用于给打包后的 JS 文件添加 hash 值以防止浏览器缓存，同时将 cache 也设为 true，以便于缓存 HTML 文件从而起到优化访问速度的作用。

在使用 html-webpack-plugin 插件时，可以使用 CleanWebpackPlugin 清空输出的目录，确保重新生成的 HTML 文件能够被读取。

以上是两种常见的处理方案，如果上述方案都无效，可以尝试在打包时使用 vue.config.js 进行配置。