vue项目SEO优化以及生成sitemap.xml

众所周知vue项目本质是单页面项目，对SEO优化十分不好，找起资料来更是麻烦。闲话不多说，分享一下我对自己项目进行的SEO方案及生成sitemap.xml。
需要的库

npm install sitemap-webpack-plugin --save-dev
npm install prerender-spa-plugin -D
前者是用来生成sitemap的，后者是SEO方案

vue.config.js

const PreRenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PreRenderSPAPlugin.PuppeteerRenderer
const path = require('path')
const webpack = require('webpack')
//下面这个routes理论上可以直接require('./src/router.paths').default.map(r => r.path).filter(p => !p.match(/\*/))这么引入
//如果你的route文件是单独把路径写在其他文件里面，不包括引入vue等操作的话。
//否则就和我一样，不要偷懒，手动写入路由链接
const routes = ['/', '/test1', '/test2', '/test3']
const SitemapPlugin = require('sitemap-webpack-plugin').default
\module.exports = {publicPath: './',devServer: {port: 5888},pages: {index: {entry: 'src/main.js',title: 'test'}},configureWebpack: config => {return {plugins: [new PreRenderSPAPlugin({// 生成文件的路径，也可以与webpakc打包的一致。// 下面这句话非常重要！！！// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。staticDir: path.join(__dirname, 'dist'),// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。routes: routes,// 这个很重要，如果没有配置这段，也不会进行预编译renderer: new Renderer({inject: {foo: 'bar'},headless: false,//在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。renderAfterDocumentEvent: 'render-event',args: ['--no-sandbox', '--disable-setuid-sandbox']})}),new SitemapPlugin('https://www.test.com', routes, {fileName: 'sitemap.xml',lastMod: true,changeFreq: 'monthly'})]}}
}

main.js

new Vue({router,mounted() {document.dispatchEvent(new Event('render-event'))},render: h => h(App)
}).$mount('#app')

router.js

 mode: 'hash'//切记模式要切换为hash，history不管用的

以上配置完成，打包完之后，sitemap.xml就放在dist文件夹之中。需要注意的是因为这个SEO方案是对vue项目进行预渲染，所以每次不仅是打包，而且保存的时候也要花费大量时间预渲染，极其不推荐在项目完成之前进行这项工作。
最后，我本身也是个小白，对以上知识点同样一知半解，欢迎评论斧正

参考资料：
https://juejin.im/post/5dcbc2196fb9a0606f094186
https://github.com/40818419/vue-router-sitemap/issues/9

vue项目SEO优化以及生成sitemap.xml相关推荐

Vue项目SEO优化之预渲染--prerender-spa-plugin 搭配vue-meta-info
Vue项目SEO优化之预渲染–prerender-spa-plugin 搭配vue-meta-info prerender-spa-plugin配置安装执行npm i prerender-spa- ...
vue项目seo优化-预渲染prerender-spa-plugin配置
文章目录前言一.prerender-spa-plugin是什么? 1.优点 2.缺点二.使用步骤 1.安装 prerender-spa-plugin 2.配置 prerender-spa-plu ...
Vue项目SEO优化解决方案
目录前言一. Vue 项目进行 SEO 优化 1. SSR服务器渲染 2. 静态化 (博客, 介绍性官网) 3. 预渲染 prerender-spa-plugin (插件) 4. 使用Phanto ...
SEO优化之根据网址自动生成sitemap.xml文件
背景: 公司要做一个电商的网站,而该项目是由J2EE架构完成,项目经理说要让Java代码自助每天生成电子商务网站的Sitemap文件,然后开始上网各种查资料!!!然而,终于碰上了本人有生以来第一个在网 ...
nuxt 如何生成sitemap.xml 动静态站点地图
前言 sitemap.xml的作用是将我们网站的所有页面都被SEO(浏览器搜索引擎)收录,我们网站的内容更容易被用户搜到,同时增加我们的网站的知名度,排名更靠前.简言之就是用技术做网站推广,所以对于网 ...
Vue 项目性能优化方案
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM:但 Vue 项目中仍然存 ...
Vue-cli3项目seo优化--静态化打包（动态改变页面Titl、keyWords、description）
Vue-cli3项目seo优化,静态化打包(动态改变页面Titl.keyWords.description) 文章目录 Vue-cli3项目seo优化,静态化打包(动态改变页面Titl.keyWord ...
前端Vue 项目性能优化
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM:但 Vue 项目中仍然存 ...
vue项目打包优化策略
vue项目打包优化策略使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载这是首先可以 ...

vue项目SEO优化以及生成sitemap.xml

vue项目SEO优化以及生成sitemap.xml相关推荐

最新文章

热门文章