Vue.js devtools工具不显示问题

最新推荐文章于 2025-10-11 14:33:24 发布

原创最新推荐文章于 2025-10-11 14:33:24 发布 · 7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

euiadmin 专栏收录该内容

1 篇文章

订阅专栏

本文指导如何在Vue项目中遇到DevTools不可用时，通过检查Vue.config.js的externals配置和index.html中的script引用，定位并解决开发模式问题，让Vue.js DevTools恢复正常。

Vue.js is detected on this page.
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

网络上般说的问题原因：1、可能是在main.js里设置了Vue.config.devtools=false；

2、可能是用了vue.min.js，

但是如果两个的你都确定没有问题。

你需要打开index.html和Vue.config.js看一下，

在Vue.config.js中是不是有如下externals内容，它表示移除vue等这些js文件，那么项目怎么会运行呢，那就要打开index.html看一下了。

   configureWebpack: { //移除已从cdn引入的组件，不打包以下命名的内容
        externals: {
             'vue': 'Vue',
             'vue-router': 'VueRouter',
             'element-ui': 'ELEMENT',
             'echarts': 'echarts',
             'VueCookies': 'VueCookies',
        },
    },

原来它把package.json中引入的js都不用，而在index.html中用<script>再次引入这些js,注意这里还有个小问题就是在vue后面我加了 @2.6.11不加的话项目都跑不起来，它会去用vue3的js。

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script> 
  <script src="https://unpkg.com/vue-cookies@1.7.4/vue-cookies.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.js"></script>

好了现在问题找到了，我们在开发的时候，还是先把index.html中的<script>注释掉，再把vue.config.js中的externals注释掉，最后我们收悉的vue.js devtools就回来了，愉快地高度吧。