Vue远程调试 vue-remote-devtools 的使用

https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md

先上链接，这是官网给出的文档

初级用法

简单点使用只有三步

• 全局安装包 npm install -g @vue/devtools

• 执行命令 vue-devtools
  

  启动

• 在页面中加入 <script src="http://localhost:8098"></script>

正常访问页面之后会出现如下的图片

使用

缺点就是所有的运行环境都引入了此调试方法，且如果地址不能访问将影响访问速度。

高级用法

当前项目安装 npm install --save-dev @vue/devtools

引入模块 import devtools from '@vue/devtools'

引入模块要在引入vue之前 import Vue from 'vue'

实际用法

if (process.env.NODE_ENV === 'development') {
  devtools.connect(/* host, port */)
}

这样就可以只在自己的开发环境使用了，唯一的问题是打包之后的代码包多了200k+，很是头疼，尝试使用webpack解决，当前使用的是webpack4

解决打包过大的问题

使用require 动态引入

if (process.env.NODE_ENV === 'development') {
  const devtools = require('@vue/devtools')

  devtools.connect('localhost', '8098')
}