前言

没用的教程增加了！
主要是有一天无聊，想着去研究Vue Devtools是怎么做到检测网站是否使用Vue Vue3 Nuxt的
于是，就发生了这个故事......

寻找检测方法

一个个文件慢慢看，
发现了一个文件引起了我的注意.. 他就叫——detector.js !
文件地址: https://github.com/vuejs/devtools/blob/main/packages/shell-chrome/src/detector.js
没错，它就是我们要找的文件

原理

找·源码

首先映入眼帘的是 // Method 1: Check Nuxt.js 一行注释
下一行是 const nuxtDetected = !!(window.__NUXT__ || window.$nuxt)
哎呀妈耶，这么简单粗暴？
还有检测Vue的 const vueDetected = !!(window.__VUE__)
那么，欺骗Devtools就变得简单了起来......

读·源码

既然他将检测nuxt放在最前面，我们也先看nuxt的

const nuxtDetected = !!(window.__NUXT__ || window.$nuxt)

这里定义了一个常量nuxtDetected 应该是当nuxtDetected为true时devtools图标亮起并显示nuxt图标.
我们不能修改他的源码，那我们就从网站层面下手。
在Vue.js项目的index.html下，添加一行JavaScript：

window.__NUXT__ = '1';

这里的1可以为任意值，只要定义了window._NUXT_就会亮起nuxt图标
接下来看Vue检测，会亮起vue图标

const vueDetected = !!(window.__VUE__)

你这样就没意思了啊。。这里我没有试过，可以自行尝试但这也是最没用的
个人感觉nuxt图标挺好看的 doge....
方法相同，

window.__VUE__ = '1';

1也可为任意值。

关于为什么要这样...

只是觉得Nuxt图标好看doge
没有任何用，但是可能会干扰到vue devtool 所以不建议这么干
开发环境下建议去掉这一行，真需要的话上线再加上即可,