vue.js.devtools插件不能进行调试, 提示: Devtools inspection is not available...
作者： 时间：2023-09-15阅读数：人阅读
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>
- 修改后,点击刷新, 再重新打开开发者工具(按F12) , 即可显示vue的那栏
解决后的效果 :
- ok, 问题大致就解决了!
附加 :
引入vue环境
https://vuejs.org/js/vue.js (标准版)
https://vuejs.org/js/vue.min.js (最小版)
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：licqi@yunshuaiweb.com
