Hello, boss, how to use puppeteer in VUE? Const puppeteer = require('puppeteer') is called in the methods method of VUE.It's always going to be empty

<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="商品所属用户id" prop="userId"> <el-input v-model="queryParams.userId" placeholder="请输入商品所属用户id" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="商品名称" prop="name"> <el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="商品图片地址" prop="picUrl"> <el-input v-model="queryParams.picUrl" placeholder="请输入商品图片地址" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item> <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form>

<el-row :gutter="10" class="mb8">
  <el-col :span="1.5">
    <el-button
      type="primary"
      icon="el-icon-plus"
      size="mini"
      @click="handleAdd"
      v-hasPermi="['live:product:add']"
    >新增
    </el-button>
  </el-col>
  <el-col :span="1.5">
    <el-button
      type="success"
      icon="el-icon-edit"
      size="mini"
      :disabled="single"
      @click="handleUpdate"
      v-hasPermi="['live:product:edit']"
    >修改
    </el-button>
  </el-col>
  <el-col :span="1.5">
    <el-button
      type="danger"
      icon="el-icon-delete"
      size="mini"
      :disabled="multiple"
      @click="handleDelete"
      v-hasPermi="['live:product:remove']"
    >删除
    </el-button>
  </el-col>
  <el-col :span="1.5">
    <el-button
      type="warning"
      icon="el-icon-download"
      size="mini"
      @click="handleExport"
      v-hasPermi="['live:product:export']"
    >导出
    </el-button>
  </el-col>
  <el-col :span="1.5">
    <el-button
      type="warning"
      icon="el-icon-download"
      size="mini"
      @click="caijiProduct"
      v-hasPermi="['live:product:caiji']"
    >采集
    </el-button>
  </el-col>
  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>

<el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55" align="center"/>
  <el-table-column label="商品id" align="center" prop="productId"/>
  <el-table-column label="商品所属用户id" align="center" prop="userId"/>
  <el-table-column label="商品名称" align="center" prop="name"/>
  <el-table-column label="商品图片地址" align="center" prop="picUrl"/>
  <el-table-column label="商品描述" align="center" prop="description"/>
  <el-table-column label="备注" align="center" prop="remark"/>
  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
    <template slot-scope="scope">
      <el-button
        size="mini"
        type="text"
        icon="el-icon-edit"
        @click="handleUpdate(scope.row)"
        v-hasPermi="['live:product:edit']"
      >修改
      </el-button>
      <el-button
        size="mini"
        type="text"
        icon="el-icon-delete"
        @click="handleDelete(scope.row)"
        v-hasPermi="['live:product:remove']"
      >删除
      </el-button>
    </template>
  </el-table-column>
</el-table>

<pagination
  v-show="total>0"
  :total="total"
  :page.sync="queryParams.pageNum"
  :limit.sync="queryParams.pageSize"
  @pagination="getList"
/>


<!-- 添加或修改直播商品管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="商品所属用户id" prop="userId">
      <el-input v-model="form.userId" placeholder="请输入商品所属用户id"/>
    </el-form-item>
    <el-form-item label="商品名称" prop="name">
      <el-input v-model="form.name" placeholder="请输入商品名称"/>
    </el-form-item>
    <el-form-item label="商品图片地址" prop="picUrl">
      <el-input v-model="form.picUrl" placeholder="请输入商品图片地址"/>
    </el-form-item>
    <el-form-item label="商品描述" prop="description">
      <el-input v-model="form.description" type="textarea" placeholder="请输入内容"/>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm('add')">确 定</el-button>
    <el-button @click="cancel('add')">取 消</el-button>
  </div>
</el-dialog>

<!-- 采集商品 -->
<el-dialog :title="title" :visible.sync="caijiOpen" width="500px" append-to-body>
  <el-form ref="form" :model="liveForm" :rules="rules" label-width="80px">

    <el-form-item label="抖音手机号" prop="mobile">
      <el-input v-model="liveForm.mobile" placeholder="请输入抖音手机号"/>
      <el-button
        size="mini"
        type="text"
        icon="el-icon-edit"
        @click="getCode"
        v-hasPermi="['live:product:edit']"
      >获取验证码
      </el-button>
    </el-form-item>

    <el-form-item label="验证码" prop="authCode">
      <el-input v-model="liveForm.authCode" placeholder="请输入验证码" readonly/>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm('caiji')">确 定</el-button>
    <el-button @click="cancel('caiji')">取 消</el-button>
  </div>
</el-dialog>

</div> </template>

`<script> import {listProduct, getProduct, delProduct, addProduct, updateProduct, exportProduct,sendCode} from “@/api/live/product”;

export default {
    name: "Product",
    components: {},
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 直播商品管理表格数据
            productList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 采集是否显示
            caijiOpen: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userId: null,
                name: null,
                picUrl: null,
                description: null,
            },
            // 表单参数
            form: {},
            liveForm:{},
            // 表单校验
            rules: {}
        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询直播商品管理列表 */
        getList() {
            this.loading = true;
            listProduct(this.queryParams).then(response => {
                this.productList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel(flag) {
            if("caiji"==flag){
                this.caijiOpen = false;
                this.reset();
            }else{
                this.open = false;
                this.reset();
            }
        },
        // 表单重置
        reset() {
            this.form = {
                productId: null,
                userId: null,
                name: null,
                picUrl: null,
                description: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                remark: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.productId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加直播商品管理";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const productId = row.productId || this.ids
            getProduct(productId).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改直播商品管理";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.productId != null) {
                        updateProduct(this.form).then(response => {
                            this.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addProduct(this.form).then(response => {
                            this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const productIds = row.productId || this.ids;
            this.$confirm('是否确认删除直播商品管理编号为"' + productIds + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delProduct(productIds);
            }).then(() => {
                this.getList();
                this.msgSuccess("删除成功");
            })
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm('是否确认导出所有直播商品管理数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return exportProduct(queryParams);
            }).then(response => {
                this.download(response.msg);
            })
        },
        /** 采集商品 */
        caijiProduct() {
            this.reset();
            this.caijiOpen = true;
            this.title = "采集商品";
        },
        /** 获取验证码 */
        getCode() {
            const puppeteer = require('puppeteer');
            console.log("asdasd",puppeteer);
            puppeteer.launch().then(async browser => {
                const page = await browser.newPage();
                await page.goto('https://buyin.jinritemai.com/mpa/account/login');
                await page.screenshot({path: 'screenshot.png'});
                await browser.close();
            });


          // sendCode(this.liveForm.mobile);
        }
    }
};

</script>`

[liuzhaoxu1996]

you should wait some time, and then to screenshot, because vue instance is not mounted! 你应该等一段时间，然后再截屏，因为vue实例没有挂载！ 原理错了，在vue前端环境中不能使用puppeteer。

我在项目中已使用微软开发的playwright。

Liu Zhaoxu, little boy,Please speak Chinese. You are clearly a Chinese, but you want to pretend to be a foreigner. Are you a traitor? 刘兆旭小屁孩，请你讲中文，你明明是一个中国人，却要冒充洋人，你是卖国贼？

SB

[stale[bot]]

We are closing this issue. If the issue still persists in the latest version of Puppeteer, please reopen the issue and update the description. We will try our best to accomodate it!