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 (最小版)