本文由腾讯云 社区自动同步，原文地址 https://stackoverflow.club/article/vue_seo_spa_new_way/
思路
单页面做SEO自然很困难，因为所有的内容都是动态生成的，而爬虫不会去费劲抓回这些异步的数据。那么如果我做两个页面呢？
- 一个页面是首页 管理后台，首页需要实时更新，加一些meta就会被收录，且通常搜索引擎过来的流量很少是直接到首页；管理后台最适合单页面，不需要被搜索。以下称为非SEO页。
- 另一个页面是SEO页面，实质内容页，或者说是营销页。以下称为SEO页。
非SEO也就采用next-blogger现有的代码结构，全站Vue。
SEO页采用部分vue的方式，分块如下：
- header 一些栏目的链接，设置为固定的即可
- title，meta 在写文章时就指定，设置为固定
- article 文章的主题内容，设置为固定
- related article 相关文章，使用vue或者其他js，动态从服务器获取
- comments 动态内容，使用vue或者其他js动态获取
- category，tag 链接，动态内容，跳转到非SEO页
非SEO页与SEO页的跳转方式：
SEO页全部采用静态固定链接，在非SEO页跳转到SEO页之前，必须将该页面生成并发送到服务器
SEO页的生成：
- 搭建vue工程做出该页面
- 将js、css等静态文件先部署到服务器
- 使用模板软件或者自己写函数，实现渲染功能
- 将渲染软件部署到云函数或者本地服务器
- 非SEO页的管理页面增加按钮，发送文章内容到渲染服务器
- 将渲染之后的SEO页保存到静态文件托管文件服务器，发送方可以是渲染服务器，也可以是浏览器
- 推送链接到CDN服务商
- 检查链接是否可访问，推送链接到搜索引擎，原创内容等
- 使用第三方内容平台的api，推送该内容到第三方内容平台，如知乎、csdn、博客园、脚本之家
技术内容与实现过程可以看使用Python jinja2和云函数做页面渲染
时间记录：
- 20190405 还需要做的事 footer的站点名称与header保持一致；header动态获取和链接； SEO页的更新： 只要将更新后的页面保存到静态文件托管服务器即可
- 20190408 完成编码并上线
- 20190619 完成编码过程博文撰写Nginx配置 我们实现页面静态化之后，如果刷新会出现404，这时候需要修改Nginx的一些配置。
Nginx的Rewrite实现router history 刷新 无404
一个典型的Nginx的配置为
代码语言：txt复制[root@test-huanqiu ~]# cat /Data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf
server {
listen 80;
server_name testwx.wangshibo.com;
root /Data/app/xqsj_wx/dist;
index index.html;
access_log /var/log/testwx.log main;
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
}这里的rewrite规则很重要，因为既要保证服务端在刷新时返回index.html文件内容，浏览器的地址栏又不能变。在这里解释了flag标志的含义，即last代表浏览器地址不变。在Apache中应该是PT。
