vue devtools无法使用

一、总结

一句话总结:

没显示vue devtools调试工具的原因是用了生产环境的版本或是压缩的vue版本,或是没有勾选:允许访问文件网址

二、vue调试工具Devtools不出现的解决方式

转自或参考:vue调试工具Devtools不出现的解决方式
https://blog.csdn.net/przlovecsdn/article/details/82256558

 

在使用vuex时,想直观的查看数据state的变动,用Devtools可实现,但是在Google浏览器中开发调试的时候,右上角出现vue的图标,但是在开发者工具中没有出现vue调试(已在扩展程序中安装 Vue Devtools)

vue图标:

开发者工具:

扩展程序:

没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本,或是没有勾选:允许访问文件网址

https://github.com/vuejs/vue-devtools

1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.
2. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.

如果勾选了还是没有显示,说明采用了压缩版/生产版的Vuejs,则继续采用如下方案:

解决方案一:

采用script方式引入,需要在webpack.base.config.js添加externals

externals: {
'vue': 'Vue',
},

然后在index.html引入https://cdn.bootcss.com/vue/2.5.16/vue.js,在main.js中干掉import vue from 'vue',

放到生产环境时,换成https://cdn.bootcss.com/vue/2.5.16/vue.min.js,

此种方式可以减少vendor打包体积

方案二:

在main.js中添加

// 若是没有开启Devtools工具,在开发环境中开启,在生产环境中关闭
if (process.env.NODE_ENV == 'development') {
Vue.config.devtools = true;
} else {
Vue.config.devtools = false;
}

附注:vue各版本

 

UMD

CommonJS

ES Module

完整版

vue.js

vue.common.js

vue.esm.js

只包含运行时版

vue.runtime.js

vue.runtime.common.js

vue.runtime.esm.js

完整版 (生产环境)

vue.min.js

-

-

只包含运行时版 (生产环境)

vue.runtime.min.js

-

-

 

vue devtools无法使用的更多相关文章

  1. Vue Google浏览器插件 Vue Devtools无法使用的解决办法

    1.插件安装不必多说  一定要用Vue.js 开发版    Vue.min.js 在控制面板就不会显示 2.本地调试 用的是file://协议 修改插件允许访问文件网址  打上对勾

  2. vue 在浏览器控制台怎么调试 谷歌插件vue Devtools

    vue 在浏览器控制台怎么调试 谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...

  3. 【vue】chrome已安装Vue Devtools在控制台却无显示

    chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...

  4. vuejs之Vue Devtools

    Vue Devtools大法好 这是一篇小白friendly教程 Vue Devtools是一款谷歌浏览器插件,专门为调试vue而设计.假设你做了一个vue应用,当你在调试的过程中,打开的控制台是这样 ...

  5. Vue安装以及Vue项目创建以及Vue Devtools安装

    这几天一直在学习Vue.js框架. 因为以前没有前端项目的经验,也没学过什么前端框架,所以,对于vue.js的学习有些不知所措. 在vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建 ...

  6. 使用vue Devtools

    第一步: 在谷歌应用商店中查找 vue Devtools 并安装.安装之后,即使我们打开了vue项目发现vue标识是灰色的,说明并没有成功启动vue. 第二步: 默认安装的情况下,找到C:\Users ...

  7. 【22】Vue 之 Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

  8. Vue安装及插件Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

  9. Vue项目无法使用局域网IP直接访问的配置方法

    一般使用 vue-cli 下来的项目是可以直接访问局域网 IP 打开的,比如 192.168.1.11:8080 .但是最近公司的一个项目只可以通过 localhost 访问. 需要配置一下,才可直接 ...

随机推荐

  1. MySQL详细知识点总结

    1 Windows服务 -- 启动MySQL net start mysql -- 创建Windows服务 sc create mysql binPath= mysqld_bin_path(注意:等号 ...

  2. (六)图数据neo4j之cypher(一)

    1.Cypher概述 cypher是一种声明式的图数据库查询语言,能高效的查询和更新图数据库,是依赖于模式的.所谓模式(Patterns)是就是众多节点和关系的任意复杂想法. (1)节点语法 cyph ...

  3. HugePages概述--翻译自19C文档

    翻译自: https://docs.oracle.com/en/database/oracle/oracle-database/19/unxar/administering-oracle-databa ...

  4. EtherNet/IP 协议应用层使用CIP协议&CIP协议中使用的TLS和DTLS(Network Infrastructure for EtherNet/IPTM: Introduction and Considerations)

  5. lvs+keepalived+application部署(只使用两台机器)

    目前大家用LVS+Keepalived + APP 架构都是 2台LVS +Keepalived 然后后端跟着 应用设备 然而针对小客户来说,  2台LVS平常没什么压力 还有一台备着(虽然可以跑双主 ...

  6. 用js刷剑指offer(链表中倒数第k个结点)

    题目描述 输入一个链表,输出该链表中倒数第k个结点. 牛客网链接 思路 设置两个指针,p,q,先让p走k-1步,然后再一起走,直到p为最后一个 时,q即为倒数第k个节点 js代码 // 空间复杂度1 ...

  7. 共用dll如何扩展

    今天需要对一个多个项目共用的dll进行扩展.发现很难搞,然后老大告诉我共享的dll有一个属性指向各个平台自己的类型,这个类型是暴露在各个平台自己项目中的. 然后直接对这个属性进行扩展就行了,这个属性是 ...

  8. ndk学习之C语言基础复习----指针、函数、预处理器

    指针: 指针乃C.C++的灵魂之所在,所以有必要好好的复习复习.什么是指针?一句话来概括:“指针是一个变量,它的值是一个地址.”,其中指针变量的声明有如下三种形式: 其中第一种是被推荐的写法. 其中还 ...

  9. Python 多版本管理利器 pythonbrew

    在$HOME目录中管理python安装 简介 pythonbrew是受 perlbrew 和 rvm 启发,在用户的$HOME目录中进行python构建和安装自动化的项目. 另一衍生版本 : pyth ...

  10. WCF错误处理

    介绍 WCF(Windows Communication Foundation) -异常处理:一般Exception的处理,FaultException和FaultException<T> ...