vue3项目使用 devtools 出现问题

Question

概述

从 github 上下载的 vue3 项目，我的 chrome 安装了 devtools 但是点击后出现下面的提示：

网上搜索了说要在项目的 main.js 中添加配置：
Vue.config.devtools = true
我的代码添加后如下 - 完整的 main.js 代码

import { createApp } from "vue";
import App from "./App.vue";

// cool
import { bootstrap } from "@/core";

// router
import router from "@/router";

// store
import store from "@/store";

import "@/mock";

// element-plus
import ElementPlus from "element-plus";
import "@/assets/css/element-variables.scss";
import locale from "element-plus/lib/locale/lang/zh-cn";

// mitt
import mitt from "mitt";

// echarts
import VueECharts from "vue-echarts";
import { Vue } from "vue-demi";

Vue.config.devtools = true;

const app = createApp(App);

bootstrap(app)
    .then(() => {
        // echarts 可视图表
        app.component("v-chart", VueECharts);

        // 事件通讯
        app.provide("mitt", mitt());

        app.use(store)
            .use(router)
            .use(ElementPlus, { locale })

            .mount("#app");
    })
    .catch((err: string) => {
        console.error(`COOL-ADMIN 启动失败`, err);
    });

store.dispatch("appLoad");

通过 npm run serve 运行后会在 Vue.config.devtools = true 一行报错，无法进入项目
我要如何解决？

Answer 1

Vue.config.devtools = true是vue2的语法。
vue3应该是：

const app = createApp({})
app.config.devtools = true

这个属性一般默认就是true，不用自己的设置的。
devtools不生效的话你可以看看项目是否成功运行了，重新打开一般控制台试试。