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.<anonymous> (/Users/jikechenxing/Desktop/yfr/recordingclass-pro/vue-text/newpro/node_modules/puppeteer/lib/helper.js:110:27)
at Object.<anonymous> (/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! puppeteer@1.17.0 install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the puppeteer@1.17.0 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