当我们使用React、Vue、Angular这些客户端渲染框架时，他们都有一个共性，都是在客户端进行解析js来渲染我们的DOM，但这样会有几个问题！

• “首屏渲染白屏问题”，初次请求到html、css和js时，他还需要在客户端浏览器进行解析的过程才能拿到真正的DOM，这样就会导致先请求到基础的html(也就是我们public文件夹中的index.html文件)，其中的id为root(React)、app(Vue)标签中没有内容导致的白屏现象。
• “SEO问题”，就像百度的检索爬虫时，他是不能像谷歌一样就检索时就会执行js解析我们的关键字，百度的检索只会拿到我们的html，这样就会导致我们页面中的很多文字不会被百度检索到，从而SEO效果非常差

此处我们可以使用prerender-spa-plugin插件在打包时就可按路由打包为一个个html文件

此处有一个坑，因为本人webpack是5*版本，使用此插件是会报错，如果和我一样的版本可使用@dreysolano/prerender-spa-plugin作为替换

主要在webpack.config.js中做修改

// 先导入
const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin');

//在 plugins 中添加以下代码
 new PrerenderSPAPlugin({
        // Required - The path to the webpack-outputted app to prerender.
        staticDir: path.join(__dirname, '../build'),
        // 此处添加路由，它会根据路由打包出一个个文件夹
        routes: [
          '/',
          'home'
        ]
  }),

前端部署项目