Vue devtools不会在Laravel应用程序中显示

Question

在我的新的Laravel应用程序中，我很难启用Vue dev工具。

我看到了this question，但我不想重设我的项目，我相信这是命令做的。

我也不能删除生产提示

当我在控制台中window.Vue.config时，我得到以下内容：

{
   ...
   devtools: true
   productionTip: false
}

我的reasources/assets/js/index.js读到：

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

window.Vue.config.productionTip = false
window.Vue.config.devtools = true

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

import App from './App.vue'

const app = new Vue({
  el: '#app',
  components: { App },
  template: '<App />'
});

尽管如此，这些更改并没有反映在实际的dev工具UI中。

Answer 1

而不是在导入的Vue上，在结果的app对象上设置这些变量。这在Vue 2和3中都适用，如下所示：

const app = new Vue({…});  // vue 2
const app = createApp({…});  // vue 3

window.app = app;
window.app.config.productionTip = false;
window.app.config.devtools = true;