精华内容
下载资源
问答
  • vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
  • vue项目SEO优化以及生成sitemap.xml

    千次阅读 2020-05-14 10:19:59
    闲话不多说,分享一下我对自己项目进行的SEO方案及生成sitemap.xml。 需要的库 npm install sitemap-webpack-plugin --save-dev npm install prerender-spa-plugin -D 前者是用来生成sitemap的,后者是SEO方案 ...

    众所周知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

    展开全文
  • vuepress的Sitemaps生成器插件。 安装 纱 yarn add vuepress-plugin-sitemap NPM npm install vuepress-plugin-sitemap 在v2.0.0中,除了sitemap之外的其他依赖项都已移至peerDependencies,因此,当我们将此...
  • <p>I want to dynamically create an XML sitemap based on records in a database (each record has it's own page). I have a .php file which generates the XML and returns text/xml.</p> <pre><code><?...
  • Simple Sitemap For Vue Router (zigamiklic.com) 1. 准备代码 在router.js 中 添加如下代码 function getRoutesList(routes, pre) { return routes.reduce((array, route) => { const path = `${pre}${...

    Simple Sitemap For Vue Router (zigamiklic.com)

    1. 准备代码

    在router.js 中 添加如下代码

    
    function getRoutesList(routes, pre) {
      return routes.reduce((array, route) => {
        const path = `${pre}${route.path}`;
    
        if (route.path !== '*') {
          array.push(path);
        }
    
        if (route.children) {
          array.push(...getRoutesList(route.children, `${path}/`));
        }
    
        return array;
      }, []);
    }
    
    
    // getRoutesList(router.options.routes, 'https://zigamiklic.com');
    function getRoutesXML() {
      const list = getRoutesList(router.options.routes, 'https://www.gjdbyy.com/')
        .map(route => `<url><loc>${route}</loc></url>`)
        .join('\r\n');
      return `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
        ${list}
      </urlset>`;
    }
    
    console.log(getRoutesXML())

    2. npm run serve 运行

    运行后会在控制台中打印出来sitemap 信息,然后贴到网站根目录下即可

     

    展开全文
  • 生成sitemap.xml软件

    2008-07-16 18:20:38
    可以生成网站地图的小软件,以前都是手动写的,少的还好说,可多了就很累人,有了这个小软件再也不用手动写了.
  • https://www.xml-sitemaps.com http://www.sitemapx.com/
    展开全文
  • vue动态生成li

    2020-07-20 14:36:10
    "> <i class="fa fa-sitemap"></i> 系统管理</span><span class="fa arrow"></span> </a> <ul class="nav nav-second-level collapse"> <li> 用户管理</a> ...
    <ul class="nav metismenu" id="side-menu">
    						<li class="nav-header">
    							<div class="dropdown profile-element">
    								<img alt="image" class="rounded-circle" src="img/头像.jpg" style="width: 45px;height: 45;" />
    								<a href="javascript:void(0);">
    									<span class="block m-t-xs font-bold" v-if="loginuser">{{loginuser.loginName}}</span>
    									<span class="text-muted text-xs block" v-if="loginuser">{{loginuser.roleName}}</span>
    								</a>
    							</div>
    							<div class="logo-element">
    								Share Sun
    							</div>
    						</li>
    						<!-- <li>
    							<a href="task.html">
    								<i class="fa fa-diamond"></i>
    								<span class="nav-label">我的工作台</span>
    							</a>
    						</li>
    						<li>
    							<a href="dealttask.html">
    								<i class="fa fa-th-large"></i>
    								<span class="nav-label">我的待办</span>
    							</a>
    						</li>
    						<li>
    							<a href="account.html">
    								<i class="fa fa-envelope"></i>
    								<span class="nav-label">我的账户</span>
    							</a>
    						</li>
    						<li>
    							<a href="taskstatistics.html">
    								<i class="fa fa-pie-chart"></i>
    								<span class="nav-label">待办统计</span> 
    							</a>
    						</li>
    						<li>
    							<a href="javascript:void(0);">
    								<i class="fa fa-sitemap"></i> 
    								<span class="nav-label">系统管理</span><span class="fa arrow"></span>
    							</a>
    							<ul class="nav nav-second-level collapse">
    								<li>
    									<a href="userManager.html">用户管理</a>
    								</li>
    							</ul>
    						</li> -->
    						
    						
    
    					</ul>
    
    $.ajax({
    						url: this.projectName + '/menu/getMenuByLoginUser',
    						type: 'get',
    						dataType: 'json',
    						success: function(result) {
    							// console.log('当前菜单-----',result.data);
    							var menulist=result.data;
    							var list=$('#side-menu').html();
    							menulist.forEach(function(val){  
    								if(val.menuName=='用户管理'){
    										list+='<li>'+
    										'<a href="javascript:void(0);"><i class="fa fa-sitemap"></i><span class="nav-label">系统管理</span><span class="fa arrow"></span></a>'+
    											'<ul class="nav nav-second-level collapse"><li><a href="'+val.menuUrl+'">'+val.menuName+'</a></li></ul>'+'</li>';
    									}else{
    										list+='<li><a href="'+val.menuUrl+'"><i class="fa fa-diamond"></i><span class="nav-label">'+val.menuName+'</span></a></li>';
    									}
    							});
    							// for(var val of menulist){
    							// 	console.log(val.menuName,val.menuUrl);
    							// 	if(val.menuName=='用户管理'){
    							// 		list+='<li>'+
    							// 		'<a href="javascript:void(0);"><i class="fa fa-sitemap"></i><span class="nav-label">系统管理</span><span class="fa arrow"></span></a>'+
    							// 			'<ul class="nav nav-second-level collapse"><li><a href="'+val.menuUrl+'">'+val.menuName+'</a></li></ul>'+'</li>';
    							// 	}else{
    							// 		list+='<li><a href="'+val.menuUrl+'"><i class="fa fa-diamond"></i><span class="nav-label">'+val.menuName+'</span></a></li>';
    							// 	}
    							// }
    							 // console.log('here-----------',list);
    							$('#side-menu').html(list);
    
    						}
    

    3
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • http://www.xml-sitemaps.com/
  • 如何生成网站地图(Sitemap

    千次阅读 2018-08-27 16:58:57
    一、网站地图定义: 网站地图,又称站点地图,它就是一个页面,上面放置了网站上需要搜索引擎抓取的所有页面的链接(注:不是所有页面)。...自动生成:开启后网站内容更新后自动更新网站地图。 过滤...
  • 最近写了个门户网站使用vue做的,不可避免的遇到了SEO方面相关的问题,下面将我采用的解决方案贴出来供大家参考 主流的方案 1.SSR服务器渲染; 2.静态化; 3.预渲染prerender-spa-plugin; 第一点推荐先去官网...
  • vue转kbone

    2020-09-16 10:32:03
    注意一个Bable的版本可能会产生冲突,将我们dependencies的"babel-loader"版本改成和kbone里面生成的同样的版本即可 小程序中不支持<style scoped>?? 突然会包缺少一个文件sitemap.json,之前没有这个...
  • 今天给大家分享一个 知识点,诶~ 那就是: “为什么uniApp启动的小程序会出现多个sitemap.json文件 ” 。 。换行 。换行 。换行 。换行 。换行 。换行 进入正题 He Tui … He Tui… He Tui ~ 嗯嗯嗯嗯嗯。。。 进入...
  • 分享一款自用的VuePress主题vuepress-theme-maker 简介:基于vuepress-blog博客插件开发并保留了大多数默认主题配置项,文章支持标签和分类, 自带友情链接页及vssue评论,在原有markdown格式上扩展b了`页脚标注...
  • 在之前为了搭建 VuePress 的文档,顺带制作了视频教程,如今准备再次搭建一个 VuePress 的项目,一看自己的视频竟然有五个小时,天呐,我只是需要过一遍而已,所以重新整理成文档吧,万一将来又要用呢…… ...
  • 基于以上的需求,最后决定采用的技术方案是前端页面用 vue 来写,然后涉及到扫码和打原生App的话就用 HBuilder 的 wap2app 的方式,综合时间和开发成本上的考虑,这种方案是最合适的。 前端界面没什么说的,这里要说...
  • vue 官方推荐的好用的三方库

    千次阅读 2020-12-31 21:47:13
    很棒的Vue.js 太棒了 与Vue.js相关的精彩内容精选清单 资源资源 官方资源 外部资源 工作门户 社区 会议活动 播客 YouTube频道 官方例子 讲解 例子 图书 博客文章 培训班 纪录片 使用Vue.js的项目 开源的 商业产品 ...
  • 文章内容目录 文章内容目录 第一部分 - 博客/文档系统的搭建 ...博客/文档工具vuepress介绍 vuepress是如何工作的? vuepress 一些特性 vuepress 插件架构 博客/文档基础搭建 brew安装或者...
  • 而你的网站内容不需要AJAX去获取内容和展示内容,那么可以试试 prerender-spa-plugin 这个插件,这个插件是一个webpack插件,可以帮助你在打包过程中通过无头浏览器去渲染你的页面,并生成对应的HTML。当然这个方案...
  • VuePress 开发静态博客

    2020-03-22 02:49:24
    本文,仅针对开发过程的记录,具体配置,请移步 VuePress 官网 AND @vuepress/theme-blog 官网 点击 静态博客 查看线上效果 一、准备工作 创建 github 新项目,并将项目克隆到本地 注意: 创建项目时选择 ....
  • 介绍VuePress 是一个静态网站生成器,包含由Vue驱动的主题系统和插件API,同时还包含一个为书写技术文档而优化的默认主题。此篇文章只介绍如何使用VuePress 搭建个人博客的部...
  • 1.什么是vue vue 是一个以数据驱动视图的渐进式 mvvm 模式框架 2.vue指令?v-if v-show ;v-html v-text区别 v-for,v-model,v-bind,v-on, v-once; v-if控制的是元素的加载与销毁,v-show控制元素的display样式...
  • 项目演示 网站首页:https://www.yunmobai.cn/ 网站源码:https://gitee.com/baymaxsjj/by-vue-blog
  • vue的seo优化

    2021-09-01 17:43:56
    主要方案 ①SSR服务器渲染 ②静态化 ③预渲染prerender-spa-plugin eg:① 推荐官网了解学习下,SSR建议是在开发之前选用,开发完后在选用SSR有点不太现实。 ②手写代码静态代码很难受。...在vue.config.js中 con
  • 文章目录一:VUE获取当地天气情况二:使用mpvue框架写小程序的准备--创建空mpvue三:解决用mpvue开发小程序时报错:找不到sitemap.json入口四:前端基于koa搭建服务器五:vue使用js对图片进行点击标注圆点并记录他的...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 313
精华内容 125
热门标签
关键字:

vue生成sitemap

vue 订阅