purpose

Since the normal crawler of Vue based SPA project cannot crawl the content of static text of the project, the PRERender-SPa-Plugin is used to solve the SEO problem of Vue’s SPA project.

You can see that the index.html compiled for the project only contains references to HTML and JS, CSS files, and no static text for the content. Of course, you can also add the meta keyword and descrption to briefly describe the content of the site.

Curl xxxx.com // returns only simple HTML and JS references with no related static textCopy the code

Use process

Vue prerender-spa-plugin GitHub address

Problems that can be solved

  • SEO
  • Slow Client
  • OpenGraph/Social Metadata

Can’t solve

  • User – specific content,
    • Different users will see different pages, and this type of page is not suitable for pre-rendering
  • Frequently changing Content
    • For pages that change frequently, such as sports matches, the compiled data is not up to date
  • Thousands of routers
    • Do not route too many pages, which can lead to a build process that takes too long to build

implementation

Mainly through the way of Webpack plug-in, control compiled static file way.

NPM install [email protected] - saveCopy the code

Webpack simple configuration

// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')
 
module.exports = {
  // ...
  plugins: [
    new PrerenderSpaPlugin(
      // Absolute path to compiled SPA
      path.join(__dirname, '.. /dist'),
      // List of routes to prerender
      [ '/'.'/about'.'/contact'])]}Copy the code
  • When you’re done packing, you’ll find the originaldistIn the directory, moreabout.contactDirectory like this, there will be a corresponding directory in this directoryindex.htmlFile; This file is a static page after the production of the corresponding route, which is convenient for SEO
Curl xxxx.com // you will find that the rendered page is returned, not the simple js reference to the original pageCopy the code
  • If you need to configure route access, this parameter is requiredApacheorNginxAnd so on, match the corresponding route to access the specified directory under the index.html file, you can.
Each page returns a compiled static file curl xxxx.com/about curl xxx.com/contactCopy the code

Several problems encountered:

  • The version used in the project is 2.1.0, and the @3.0.0 version is not successfully installed, which will be stuck in the installation process, causing the download to fail. If it is terminated directly, an error will be reported in the subsequent build process
  • Build will also report an error if there is no route or spelling error
  • The route configured in webpack needs to be consistent with the Router/symbol
  • Pay attention to configuration such as Apache. If you access static files, they are accessed in a unified mannerdist/static/Directory, instead ofdist/about/staticThis kind of