在哪里为 vue.js devtools 设置 devtools = true？答案

【问题标题】：Where to set devtools = true for vue.js devtools?在哪里为 vue.js devtools 设置 devtools = true？
【发布时间】：2020-06-22 05:08:14
【问题描述】：

我的 vue 应用的 main.js 如下所示：

import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Routes from './routes'
import App from './App.vue'
import Vue from 'vue'
import './style/customColor.scss';

import store from "./store/store";
import { USER_ROLECHECK } from './store/actions/user'
import { REQ_ADMIN_ROLE } from "./utility/namespaces";

Vue.use(VueResource);
Vue.use(VueRouter);

const router = new VueRouter({
    routes: Routes,
    mode: 'history'
})

router.beforeEach((to, from, next) => {
  if(to.meta.reqAuth){
    if(store.getters.isAuthenticated){
      if(to.meta.reqAdmin){
        store.dispatch(USER_ROLECHECK, REQ_ADMIN_ROLE).then(() =>{
          next();
        }).catch(() =>{
          next({path: '/'})
        })
      }else{
        next();
      }
    }else{
      next({path: '/login'});
    }
  }else{
    next();
  } 
})

new Vue({
  el: '#app',
   router,
   store,
  render: h => h(App),
})

我在生产模式下运行 vue。我仍然想使用 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.

我在这里读到 https://github.com/vuejs/vue-devtools/issues/190 我需要像这样更改 main.js：

You are probably using Vue from CDN, and probably using a production build (dist/vue.min.js). Either replace it with a dev build (dist/vue.js) or add Vue.config.devtools = true to the main js file.

但我不知道在哪里将此条目添加到我的项目/应用程序 main.js :( 请帮忙！

【问题讨论】：

您是否尝试在 new Vue({....}) 之前添加 Vue.config.devtools = true ？应该够了

标签： javascript node.js vue.js npm

【解决方案1】：

好的，我自己找到了答案：这是 main.js 的代码在 devtools=true 时的样子：

import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Routes from './routes'
import App from './App.vue'
import Vue from 'vue'
import './style/customColor.scss';

import store from "./store/store";
import { USER_ROLECHECK } from './store/actions/user'
import { REQ_ADMIN_ROLE } from "./utility/namespaces";

Vue.use(VueResource);
Vue.use(VueRouter);
//HERE IT IS=============================================================
Vue.config.devtools = true; //this line should be removed in the actual live 
build!
//HERE IT IS==================================================

const router = new VueRouter({
    routes: Routes,
    mode: 'history'
})

router.beforeEach((to, from, next) => {
  if(to.meta.reqAuth){
    if(store.getters.isAuthenticated){
      if(to.meta.reqAdmin){
        store.dispatch(USER_ROLECHECK, REQ_ADMIN_ROLE).then(() =>{
          next();
        }).catch(() =>{
          next({path: '/'})
        })
      }else{
        next();
      }
    }else{
      next({path: '/login'});
    }
  }else{
    next();
  }
})

new Vue({
  el: '#app',
   router,
   store,
  render: h => h(App),
})

【讨论】：