在 Vue 应用程序中使用 Cheerio答案

【问题标题】：Use cheerio in Vue application在 Vue 应用程序中使用 Cheerio
【发布时间】：2020-04-06 15:43:55
【问题描述】：

我想使用 Cheerio 在 Vue 应用程序中抓取网站。我得到的错误如下：

Uncaught (in promise) TypeError: $.find is not a function

代码

export default {
  name: "App",
  created() {
    this.fetchUrl();
  },
  methods: {
    fetchUrl() {
      axios
        .get("https://cors-anywhere.herokuapp.com/https://stackoverflow.com/")
        .then(response => {
          const $ = cheerio.load(response.data);
          const span = $.find(".fs-headline2");
          console.log(span);
        });
    }
  }
};

沙盒

在这种情况下，我试图抓取 Stack Overflow 主页的标题'For developers, by developers'。

https://codesandbox.io/s/compassionate-boyd-u4ew7?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark&view=editor

【问题讨论】：

你的项目完成了吗？？

标签： javascript vue.js vuejs2 cheerio

【解决方案1】：

正如您所发现的，没有$.find 方法（尽管有$().find()）。要查找所有 .fs-headline2 元素，请改为使用 $('.fs-headline2')：

const $ = cheerio.load(response.data);
const span = $(".fs-headline2");

updated codesandbox

【讨论】：