vue SEO 预渲染 vue-cli3.x plugin-prerender-spa

vue做的页面不利于seo，有两种方法能解决这个问题：vue add prerender-spa和ssr
这里我用的是prerender-spa-plugin，记录一下具体流程和报错：

• 全自动安装代码

vue add prerender-spa

运行这个以后需要回答一个问题，下面一一列出来：

? Which routes to pre-render? (list them separated by a comma) /,/about,/contact
/,/about,/contact是你要预渲染的router
你可以按自己的写，要什么界面变成静态的就写哪个界面的路由，逗号隔开。

? Use a render event to trigger the snapshot? Yes
? Use a headless browser to render the application? (recommended) Yes
? Only use prerendering for production builds? (recommended) Yes
上面三个都可以写yes

运行结束以后在你的vue.config.js文件中会多一段代码：

pluginOptions: {
   prerenderSpa: {
     registry: undefined,
     renderRoutes: [
       '/',
       '/about',
       '/contact',
     ],
     useRenderEvent: true,
     headless: true,
     onlyProduction: true
   }
 }

这种操作不需要你去添加任何一段代码，直接npm run build，dist文件中就有你写的几个html静态文件。

bug

• 打包以后如果点击事件有问题，你需要去检查一下你的路由，谢谢。
• 如果打包一直不成功报错，大概里有什么 chrome npm install啥啥的，完整的我记不清了，可能安装的问题，重新安装一下：npm i puppeteer
  还是报下面的问题的话，就需要用镜像安装了。

Failed to download Chromium r662092! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
{ Error: read ETIMEDOUT
    at TLSWrap.onStreamRead (internal/stream_base_commons.js:111:27)
  -- ASYNC --
    at BrowserFetcher. (/Users/jikechenxing/Desktop/yfr/recordingclass-pro/vue-text/newpro/node_modules/puppeteer/lib/helper.js:110:27)
    at Object. (/Users/jikechenxing/Desktop/yfr/recordingclass-pro/vue-text/newpro/node_modules/puppeteer/install.js:64:16)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:279:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:752:3) errno: 'ETIMEDOUT', code: 'ETIMEDOUT', syscall: 'read' }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jikechenxing/.npm/_logs/2019-06-19T07_29_28_713Z-debug.log

使用cnpm或者

npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
npm i puppeteer

参考：https://www.npmjs.com/package/vue-cli-plugin-prerender-spa
https://github.com/GoogleChrome/puppeteer/issues/1597