vue项目seo优化-预渲染prerender-spa-plugin配置
Vue是SPA单页面应用对SEO不太友好,如果你只是需要对少数页面需要做SEO处理(例如 / 首页,/关于我们 等页面),可以使用预渲染 prerender-spa-plugin (插件)
·
文章目录
前言
Vue是SPA单页面应用对SEO不太友好,如果你只是需要对少数
页面需要做SEO处理(例如 / 首页,/关于我们 等页面),可以使用预渲染 prerender-spa-plugin (插件)
一、prerender-spa-plugin是什么?
预渲染 prerender-spa-plugin
会在构建时, 简单的针对特定路由, 生成静态 HTML 文件 (打包时可以帮你解析静态化)。
是解决Vue的SEO优化的解决方法之一。
1.优点
设置预渲染简单, 开发成本低,对代码的改动小,代码侵入性更低。
2.缺点
只适合于针对少数页面进行SEO的情况, 如果需要对几百上千的页面进行SEO优化, 就不推荐了 (会打包很慢)
二、使用步骤
1.安装 prerender-spa-plugin
npm install prerender-spa-plugin --save
or
yarn add prerender-spa-plugin
2.配置 prerender-spa-plugin
1)vue.config.js 配置
// vue.config.js
const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
function resolve(dir) {
return path.join(__dirname, dir);
};
// 修改资源打包路径
module.exports = {
publicPath: '/', //资源路径,预渲染需要history模式,所以这块要改成'/'或者对应的(二级)路径,不能'./'
configureWebpack:() => {
if (process.env.NODE_ENV !== 'production') {
return {};
}else{
plugins: [
new PrerenderSPAPlugin({
staticDir: resolve('dist'),// 读取vue-cli已打包文件的根目录 prerender-spa-plugin会在这里开启一个服务
routes: ['/','/about' ],// 需要预渲染的路由
minify: {
minifyCSS: true, // css压缩
removeComments: true // 移除注释
},
renderer: new Renderer({
inject: {
foo: 'bar'
},
// 渲染时显示浏览器窗口,调试时有用
headless: false,
renderAfterTime: 5000,
// 等待触发目标时间后,开始预渲染
renderAfterDocumentEvent: 'render-event'
})
})
]
}
}
}
2)路由的index.js 配置
// router.js
mode:‘history’,//修改vue.config.js 中PublicPath: ‘/’ ;不然会导致刷新页面路径错乱导致样式或者js丢失
3)main.js 配置
// main.js
new Vue({
el: '#app',
router,
store,
render: h => h(App),
// 预渲染
mounted () {
document.dispatchEvent(new Event('render-event'))
}
})
总结,非根目录构建
以上是部署在根目录的预渲染配置,如果部署在二级目录(非根目录)中的,如构建后的 index.html 需放在 /xxx/
路径下的情况,会出现打包很久无法成功也不报错,需要对配置做些变更,前往文章查看
更多推荐
已为社区贡献5条内容
所有评论(0)