vue3.0+ts优化SEO问题~这个坑卡了我好久

博客写完了，到了要上线时候才想起来要优化不优化的话不利于爬虫的抓取这样就没办法排名靠前啊~~可是优化这方面我又不懂，就简单的了解一下。
渲染主要分（CSR）客户端跟（SSR）服务端。
可是vue就是CSR，检查源代码并没有东西，这可不行啊这不利于爬虫。

然后一个下午各种百度，发现了有SSR渲染和预渲染都可以做到生成一个静态HTML，这传统的html静态页面就对爬虫很有利，反正我需要渲染的页面不多就首页跟详情页。
于是乎我就看了一下SSR服务端渲染，好家伙这可牛逼了，好吧我承认我好笨学不会~

这条路行不通那我们换一条路吧~
还是主要了解一下预渲染吧~

预渲染

在webpack打包结束并生成文件后（after-emit hook），会启动一个server模拟网站的运行，用puppeteer（谷歌官方的 headless 无头浏览器）访问指定的页面route，得到相应的html结构，并将结果输出到指定目录，过程类似于爬虫。
不适合数据变动较大的网站，比如天气网，股票网之类。

预渲染有个好处用个库就可以完成了~

npm i prerender-spa-plugin --save

当是你们不要把事情想的那么美好-这个坑真的卡了我一整个下午~~要不是搜索到了一篇浏览量300的大佬文章我今天都搞不定，因为这个库最新版是4年前的了，有些人可以用可是我不懂啊，卡了我一下午我就不喜欢它了。

来看一下我用prerender-spa-plugin的坑，一切都挺美好的刚开始知道npm run build打包时候就不美好了

这只是其中的一个问题，真的让人吐血

还好通过那大佬的文章提到了一个新的库，我就尝试了一下

npm i prerender-spa-plugin-next --save

大佬说prerender-spa-plugin-next这个可能是prerender-spa-plugin的升级版，于是我抱着侥幸的心理去尝试，好家伙你猜怎么样？跟着官网的步骤在vue.config.js里写了基本的配置， 我就配了两个路由一个是首页，一个是about

// vue.config.js
const { defineConfig } = require('@vue/cli-service');
const path = require("path");
// 预渲染
const PrerenderSPAPlugin = require('prerender-spa-plugin-next');

module.exports = defineConfig({
  transpileDependencies: true,
  // prerender-spa-plugin-next预渲染
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        // 需要预渲染的页面，跟router路由一致
        routes: [ '/', '/about' ],
      })
    ]
  }

})

嘿嘿成功了~

打包出来的文件夹里确实也有独立的html了。about就是我配置的路由另外一个里面有一个静态的index.html

效果

做了预渲染的查看源代码

没做之前


页面丰富查看源代码嘛也没有~

博客橙子cms点击进入

为了更好本人会不断在里面写一些公用接口让各位可以在静态网或者做个人博客时使用

目前写了7个接口-往后会不断持续的增加欢迎大家猜一下