vue 解决SEO的问题

283 阅读1分钟

SEO:搜索引擎优化

SEO最基本的条件:

  1. 多页面,方便蜘蛛抓取
  2. 页面还有蜘蛛抓取的内容
  3. title、描述、关键词

vue单页面项目不具备以上SEO条件

方案:

1. 预渲染形式(适合项目某几个页面做SEO)

安装插件 prerender-spa-plugin

在配置文件进行配置 prerender-spa-plugin使用手册

如何解决title、描述、关键字 ?

使用插件vue-meta-info

vue-meta-info使用手册

缺点:

  1. 如果有很多详情页需要SEO,此方法不适合
  2. 动态去修改title、描述、关键字也是无效的

2. 服务端渲染

推荐使用Nuxt

Nuxt项目上线流程

  1. 当npm run build 后 会生成.nuxt文件
  2. 正儿八经上线后需要将此文件和静态资源、package.json、nuxt.config.js
  3. 将上述文件放到服务器里面
  4. 服务器安装node
  5. 运行 npm install->npm run start
  6. nginx设置代理

如果不上线,怎么看?

  1. npm run build 后
  2. npm run generate
  3. 这时候会生成前端的list
  4. 点开index.html 就可以查看