标签:static dirname raft 优点 code 页面加载速度 serve adl conf
Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SSR和静态化基于Nuxt.js来说。
1、SSR服务器端渲染
2、静态化
3、预渲染prerender-spa-plugin
4、使用Phantomjs针对爬虫做处理
对Vue版本有要求,对服务器也有一定要求,需要支持nodejs环境。
npm install vue vue-server-renderer express --save
完整代码
const Vue = require(‘vue‘);
const server = require(‘express‘)();
const template = require(‘fs‘).readFileSync(‘./index.template.html‘, ‘utf-8‘);
const renderer = require(‘vue-server-renderer‘).createRenderer({
template,
});
const context = {
title: ‘vue ssr‘,
metas: `
<meta name="keyword" content="vue,ssr">
<meta name="description" content="vue srr demo">
`,
};
server.get(‘*‘, (req, res) => {
const app = new Vue({
data: {
url: req.url
},
template: `<div>访问的 URL 是: {{ url }}</div>`,
});
renderer
.renderToString(app, context, (err, html) => {
console.log(html);
if (err) {
res.status(500).end(‘Internal Server Error‘)
return;
}
res.end(html);
});
})
server.listen(8080);
静态化是Nuxt.js打包的另一种方式,算是 Nuxt.js 的一个创新点,页面加载速度很快。
优势
不足
如果你只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML,而是使用预渲染方式,在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点。
yarn add prerender-spa-plugin
vue-cli3 vue.config.js
的配置
configureWebpack: config => {
if (process.env.NODE_ENV !== ‘production‘) { return false }
return {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, ‘dist‘),
routes: [‘/‘,‘/list‘],
renderer: new Renderer({
inject: {
foo: "bar"
},
headless: false,
// renderAfterDocumentEvent: ‘render-event‘,
})
})
]
}
}
在 main.js 中添加
new Vue({
router,
render: h => h( app ),
mounted () {
document.dispatchEvent( new Event( ‘render-event‘ ) )
}
}).$mount(‘#app‘)
注意 : router中必须设置 mode: history
打包出来可以看见文件,打包出文件夹/index.html
,例如:about => about/index.html ,里面有html内容。
优势
不足
标签:static dirname raft 优点 code 页面加载速度 serve adl conf
原文地址:https://www.cnblogs.com/boygdm/p/14229874.html