vue的seo问题

参考 https://www.npmjs.com/package/prerender-spa-plugin https://www.npmjs.com/package/vue-meta-info

第一步:安装prerender-spa-plugin,vue-meta-info

npm install prerender-spa-plugin vue-meta-info --save

如果安装失败,使用淘宝镜像试试

cnpm install prerender-spa-plugin vue-meta-info --save

第二步:

2.1 main.js引入vue-meta-info

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)

组件内静态使用 metaInfo

<template>
  ...
</template>
<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

2.2 在你的项目目录下找到该文件 build/webpack.prod.conf.js,添加如下代码

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

// 在vue-cli生成的文件的基础上,只有下面这个才是我们要配置的
    new PrerenderSPAPlugin({
      // 生成文件的路径,也可以与webpakc打包的一致。
      // 下面这句话非常重要!!!
      // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
      staticDir: path.join(__dirname, '../dist'),
      // 对应自己的路由文件,比如index有参数,就需要写成 /index/param1。
      routes: ['/', '/index'],
      // 这个很重要,如果没有配置这段,也不会进行预编译
      renderer: new Renderer({
          inject: {
            foo: 'bar'
          },
          headless: false
      })
    }),

打包试试,如果打包后的文件包含index文件夹,表明成功。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • IDEA 配置 Vue 支持

    似水的流年
  • vue开发环境搭建

    首先,列出来我们需要的东西:  node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 vue的安装 1.vu...

    似水的流年
  • Microsoft Visual C++ 9.0 is required Unable to find vcvarsall.bat 解决办法

    问题描述 安装 python的mysql驱动时时出现这个错误: Microsoft Visual C++ 9.0 is required Unable to f...

    似水的流年
  • 融合之下的想象:影视众筹的未来在哪?

    孟永辉
  • vue-cli@2.x项目迁移日志

    虽然 vue-cli@3 早就已经巨普及了,新项目应该已经很少有人还有使用 vue-cli@2.x 。 但是对于一些稍微早些时候的 vue 项目,如果当时没有做...

    易良
  • python re模块常用方法总结

    res = re.match(pattern, string, flags=0) #字符串的开头是否能匹配正则表达式。返回_sre.SRE_Match对象,如果...

    ke1th
  • 为什么我的子线程更新了 UI 没报错?借此,纠正一些Android 程序员的一个知识误区

    开门见山: 这个误区是:子线程不能更新 UI ,其应该分类讨论,而不是绝对的。 半小时前,我的 XRecyclerView 群里面,一位群友私聊我,问题是: ...

    林冠宏-指尖下的幽灵
  • 自助建站:凡科建站和PageAdmin建站系统的比较

    大家都知道网站对一个企业的网络营销和推广来说非常重要,现在越来越多的企业选择自助建站,最大优点的节约费用,没有建站经验也能做出一个功能强大,甚至比专业网站建设公...

    用户4831957
  • python-其它有用模块1

    re模块是文件处理中必不可少的模块,它主要应用于字符串的查找,定位等等,在使用网络爬虫时,即使没有爬虫框架,re模块配合urllib.request模块也可以完...

    py3study
  • 通过移除 Nginx,Raygun 公司怎样将 TPS 提高了 44%?

    在 Raygun,追求极致性能已然成为公司文化的一部分。在此前的博客文章中,我们介绍了如何通过将Raygun 的 API 迁移到.NET Core 3.1,性能...

    深度学习与Python

扫码关注云+社区

领取腾讯云代金券