当我们使用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文件
npm install prerender-spa-plugin -D此处有一个坑，因为本人webpack是5*版本，使用此插件是会报错，如果和我一样的版本可使用@dreysolano/prerender-spa-plugin作为替换
npm install @dreysolano/prerender-spa-plugin -D主要在webpack.config.js中做修改
在 plugins 中添加以下代码
// 先导入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' ] }),打包后都是以路由命名的一个个文件夹，其中是html文件，文件中有html和css，正常部署在服务器上即可。
前端部署项目