vue.js.devtools插件不能进行调试, 提示: Devtools inspection is not available...

最新推荐文章于 2025-03-21 16:59:12 发布

CS@zeny

最新推荐文章于 2025-03-21 16:59:12 发布

阅读量1.9w

点赞数 13

分类专栏：笔记前端文章标签： css html html5 vue.js

本文链接：https://blog.csdn.net/honorzoey/article/details/121386030

版权

笔记同时被 2 个专栏收录

101 篇文章

订阅专栏

前端

9 篇文章

订阅专栏

本文介绍了解决Vue.js devtools插件无法正常工作的问题，提供了两种有效的方法：一是通过在代码中设置Vue.config.devtools=true来开启调试；二是直接使用标准版Vue库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js devtools已安装插件, 但是页面没有显示

文章目录

Vue.js devtools已安装插件, 但是页面没有显示

问题

已经在谷歌插件市场下载并安装好Vue.js.devtools插件, 但是不能用vue插件进行调试, 而且使用该插件的提示信息如下

提示: Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author.

已经确保该插件已经启用, 而且允许该插件访问文件网址

请添加图片描述

但结果是, vue插件的图标已经点亮, 但是开发者工具栏依然用不了该插件

请添加图片描述

测试代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>

    <!-- 引入vue的库或包, 可直接下载到本地 -->
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>

<body>
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
                el: '#vue_det',
                data: {
                    site: "vue技术",
                    url: "www.baidu.com",
                    alexa: "10000"
                },
                methods: {
                    details: function() {
                        return this.site + " - 学的不仅是技术，更是梦想！";
                    }
                }
            })
    </script>
</body>

</html>

浏览器中打开控制台刷新之后还是没有vue显示, 点击该插件图标显示

请添加图片描述

大致意思 : 在此页面上检测到Vue.js。Devtools检查不可用，因为它处于生产模式或被作者明确禁用。
- 原因是vue的mini版的是默认关闭调试的, 所以才不能用插件进行调试

解决方式 :

第一种 : 直接在代码中加入允许调试代码 Vue.config.devtools = true;

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>

    <!-- 引入vue的库或包, 可直接下载到本地 -->
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>

<body>
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
                el: '#vue_det',
                data: {
                    site: "vue技术",
                    url: "www.baidu.com",
                    alexa: "10000"
                },
                methods: {
                    details: function() {
                        return this.site + " - 学的不仅是技术，更是梦想！";
                    }
                }
            })
            Vue.config.devtools = true; //允许进行调试
    </script>

</body>

</html>

第二种 : 直接引入标准版的vue : https://vuejs.org/js/vue.js

示例代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>
    <!-- 引入vue的库或包, 可直接下载到本地 -->
    <script src="https://vuejs.org/js/vue.js"></script>
</head>

<body>
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
                el: '#vue_det',
                data: {
                    site: "vue技术",
                    url: "www.baidu.com",
                    alexa: "10000"
                },
                methods: {
                    details: function() {
                        return this.site + " - 学的不仅是技术，更是梦想！";
                    }
                }
            })
    </script>
</body>

</html>