Install prerender-SPa-plugin
2. Add the plug-in to the WebPack configuration
3. Set the render event in mian.js
4. Change the route mode to history
Principle:
Why prerender-SPa-plugin
There are two main reasons: 1.SEO: SEO of SPA applications is poor. Most of the page structure crawlers climb to is only the entrance page, but the entrance page has almost no content, so its ranking is very low
2. First-screen experience: The entry page generated by Webpack basically has only one main JS, and the page itself has no content. Therefore, before the JS is loaded, all the users see is blank.
In order to solve this problem, we usually give the specified static page to the background. The user requests the static page directly, so that the user can still see something before the main JS loads. For example, if we want to put a loading component on the first screen, it will be very troublesome, and it will also cost us to communicate with the background (in fact, we don’t want to rely on the background all the time). Therefore, if we can directly generate the first screen page with good experience, it will definitely be great
This is where the prerender-SPa-plugin comes in, generating HTML with a static structure that lets you put whatever you want into the first set
Link: www.codercto.com/a/18326.htm…