vue SEO

一。本人主要是在不改动SPA单页面的情况下,专门针对爬虫进行处理,从而完成SEO。

使用工具:puppeteer、nginx。

puppeteer:主要用于生成完整的HTML页面。完整代码:https://gitee.com/huangzuomin/get-html.git

nginx:用于代理设置。

server {
		 
	     fastcgi_intercept_errors on;# 开启支持错误自定义
		 
         listen 8082;
         server_name  localhost;

		 location / {
		   proxy_set_header  Host            $host:$proxy_port;
           proxy_set_header  X-Real-IP       $remote_addr;
           proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
	  
          if ($http_user_agent ~* (Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider|Sogou web spider|Sogou inst spider|Sogou spider|Sogou wap spider)){
             proxy_pass http://puppeteerServer; # 地址是开启的服务地址
          } 
		 
		   root C:/Users/hzm/Desktop/project/qnsj/quark-h5/dist/;
           index index.html;
		   try_files $uri $uri/ /index.html;
		 }
    }

二:说明:直接通过上面地址或者完整代码后,发布出去。然后将nginx里面的服务地址进行替换即可。主要是通过判断是不是各平台的蜘蛛,如果是则走pupoeteer 服务返回完整的HTML,否则返回SPA页面。

  • vue-router 使用history 模式。刷新的时候回出现找不到页面的情况。通过nginx 设置。当返回404的时候,直接返回默认的index.html 即可
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值