vue网站phantomjs seo优化

2个月前 134次点击 来自 前端

标签: Vuejs

vue seo phantomjs方案

https://github.com/tuoxiaozhong/vue-seo-phantomjs

安装

本地phantomjs安装:http://npm.taobao.org/dist/phantomjs/

配置环境变量,以windows为例,如你放在D:\software\phantomjs-2.1.1-windows目录下,
设置环境变量:控制面板->系统和安全->系统->高级系统设置->高级->系统变量->编辑变量Path->将D:\software\phantomjs-2.1.1-windows\bin添加到最末端即可(cmd命令要重新打开窗口才生效)。

执行

$ phantomjs -v

输出版本号说明成功了。

Ubuntu配置:

cd /usr/local 
wget http://npm.taobao.org/mirrors/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2
tar xjf phantomjs-2.1.1-linux-x86_64.tar.bz2
mv phantomjs-2.1.1-linux-x86_64 ./phantomjs
ln -s /usr/local/phantomjs/bin/phantomjs /usr/bin/
phantomjs -v

克隆项目到本地

$ git clone https://github.com/lengziyu/vue-seo-phantomjs.git

安装express

npm i express

测试:

$ phantomjs spider.js 'https://www.baidu.com/'

打印出一堆html代码就说明成功了。

线上部署

请先安装PM2、phantomjs、nodejs,并配置全局环境变量。

# 运行
pm2 start server.js

nginx配置:

upstream spider_server {
  server localhost:8081;
}

server {
    listen       80;
    server_name  example.com;
    
    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") {
        proxy_pass  http://spider_server;
      }
    }
}
Card image cap
开发者雷

尘世间一个小小的开发者,每天增加一些无聊的知识,就不会无聊了

要加油~~~

技术文档 >> 系列应用 >>
热推应用
Let'sLearnSwift
学习Swift的入门教程
PyPie
Python is as good as Pie
标签