Pre-rendering prerender-spa-plugin for solving seo Optimization by vue

Intro:   To solve the first screen problem of SEO (Search Engine Optimization), there are fewer pages, and pre-rendering is simpler than SSR. Pre-rendering can greatly improve the speed of web page access. And

To solve the first screen problem of SEO (Search Engine Optimization), there are fewer pages, and pre-rendering is simpler than SSR. Pre-rendering can greatly improve the speed of web page access. And with some meat plug-ins, it can fully meet the SEO requirements. The Prerender service needs to be supported by the NodeJs environment, and if the server environment did not have NodeJs before, it needed to be installed first.

Npm install– there are puppeteer in save prerender-spa-plugin prerender-spa-plugin that may report an error.

ERROR: Failed to download Chromium r515411! Set “PUPPETEER_SKIP_CHROMIUM_DOWNLOA D” env variable to skip download. You can try Taobao Mirror installation at this time.

Cnpm install-save prerender-spa-plugin because you need to execute install.js, during installation here you will download the Chromium, website recommendation is to skip, we can execute-ignore-scripts ignores this js execution. You can also prevent the download of Chromium by setting the environment variable set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 (because a direct download fails because it is sealed)

Npm I– save puppeteer– ignore-scripts and then manually download Chromium and unzip it under node_modules/puppeteer/.local-chromium/mac-571375 in your current project.

Webpack.base.conf.js

Module.exports = {context: path.resolve (_ _ dirname,’.. /’), / / entry: {app:’. / src/main.js’} entry: {app: [‘babel-polyfill’,’./src/main.js’] / / babel-polyfill emulate a complete ES2015+ environment and is intended to run in an application rather than a library / tool. }} webpack.prod.conf.js started me writing like this

Const PrerenderSpaPlugin = require (‘prerender-spa-plugin’) const Renderer = PrerenderSpaPlugin.PuppeteerRenderer new PrerenderSPAPlugin ({staticDir: path.join (_ _ dirname,’. / dist’), routes: [‘/ home/homePage’], renderer: new PrerenderSPAPlugin.PuppeteerRenderer ({/ / this says renderAfterTime takes effect renderAfterTime: 5000}})) development directory main.js

/ * eslint-disable no-new * / new Vue ({el:’# app’, router, store, i18n, components: {App}, template:’& lt;App/>’, render: h = & gt; H (App), / * this sentence is very important, otherwise prerendering will not start * / mounted () {document.dispatchEvent (new Event (‘render-event’)}}) you can generate html in the folder of the corresponding route that contains the page prerendering information in the dist folder.

/ / for example, routes: [‘/’,’/ home/homePage’] in PrerenderSPAPlugin generates the following path, ‘bash dist / home / index.html / homePage / index.html / index.html / static, in conjunction with the management header tag plug-in vue-meta-info main.js.

Add metaInfo information to the vue of the import MetaInfo from ‘vue-meta-info’ Vue.use (MetaInfo) page

Export default {metaInfo: {title:’We Inc’, meta: [{name: ‘keywords’, content:’ keyword 1, keyword 2, keyword 3′}, {name: ‘description’, Content: ‘this is a description of a web page} the keyword can be pre-rendered to the html page

1. Uncaught ReferenceError: webpackJsonp is not defined found that it was config/index.js.

AssetsPublicPath:’/’, / / the path is / no. / it should be emphasized here that if your assetsPublicPath is set to ‘www.xxx.com’, generated html is content-free and the information about the plug-in vue-meta-info settings will not be loaded out.

II. Solve the vuex requires a Promise polyfill in this browser problem and add the babel-polyfill plug-in webpack.base.conf.js

Related Passages:

Leave a Reply

Your email address will not be published. Required fields are marked *