vue-devtools всегда отключен с помощью nuxt.js

Я создаю новый проект, используя nuxt.js v2.3.0. Когда я запускаю npm run dev в своей консоли IDE, все компилируется правильно, но когда я перехожу на страницу, я получаю следующую ошибку: Nuxt.js + Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

Вот мой nuxt.config.js файл:

const pkg = require('./package');

module.exports = {
  mode: 'spa',

  dev: true,
  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    bodyAttrs: {
      class: 'h-100'
    },
    htmlAttrs: {
      class: 'h-100'
    }
  },

  /*
  ** Global CSS
  */
  css: [
    '@/assets/app.css'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '~/plugins/vue-notifications',
    '~/plugins/vue2-sidebar'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios',
    // Doc: https://bootstrap-vue.js.org/docs/
    'bootstrap-vue/nuxt',
    // Doc: https://auth.nuxtjs.org/getting-starterd/setup
    '@nuxtjs/auth',
    '@nuxtjs/toast',
    '@nuxtjs/font-awesome'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    baseURL: 'http://users:8000'
  },

  /*
  ** Auth module configuration
  */
  auth: {
    strategies: {
      password_grant: {
        _scheme: 'local',
        endpoints: {
          login: {
            url: '/oauth/token',
            method: 'post',
            propertyName: 'access_token'
          },
          logout: 'api/logout',
          user: {
            url: 'api/user',
            method: 'get',
            propertyName: false
          },
        },
        tokenRequired: true,
        tokenType: 'Bearer'
      }
    },
    redirect: {
      login: "/account/login",
      logout: "/",
      callback: "/account/login",
      user: "/"
    },
  },

  /*
  ** Toast configuration
  */
  toast: {
    position: 'top-right',
    duration: 2000
  },


  loading: {
    name: 'chasing-dots',
    color: '#ff5638',
    background: 'white',
    height: '4px'
  },

  /*
  ** Router configuration
  */
  router: {
    middleware: ['auth']
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {

    }
  }
};

Если бы я работал в производственном режиме, я мог бы понять, но это не так. Я ожидал, что vue-devtools будет работать нормально.


vue.js nuxt.js vue-devtools
person joshua jackson    schedule 16.11.2018    source источник
comment
Как запустить приложение?   -  person Aldarund    schedule 17.11.2018
comment
@Aldarund Я использую npm run dev в своей консоли IDE и запускаю приложение в Chrome   -  person joshua jackson    schedule 17.11.2018

Ответы (5)


arrow_upward
19
arrow_downward

Мне пришлось добавить в nuxt.config.js следующее:

vue: {
  config: {
    productionTip: false,
    devtools: true
  }
}

Теперь появляются инструменты разработки

person joshua jackson    schedule 17.11.2018
comment
Какую версию вы использовали, когда это работало? Я на последней v2.4.5 и не повезло. nuxtjs.org/api/configuration-build#devtools указывает, что мы можем установить От devtools до true в конфигурации сборки, но у меня это тоже не работает (ни в сочетании с этим). - person Christopher; 09.03.2019

arrow_upward
2
arrow_downward

tl:dr:

  • vue.config.devtools = true в моем nuxt.config.js у меня не работает.
  • Я запустил nuxt generate --devtools, затем nuxt start и открыл веб-сайт в своем браузере. Для этого я мог использовать Vue-Devtools.
  • После этого я все еще могу использовать Vue-Devtools, даже если запущен nuxt dev и не установлен флаг vue.config.devtools в моем nuxt.config.js

Полный рассказ

Поэтому включение флага devtools в vue.config, как в принятом ответе, у меня тоже не сработало.

Сначала я попытался принудительно запустить Vue-Devtools, как описано person Jan-Luca Klees    schedule 09.10.2020


arrow_upward
2
arrow_downward

в nuxt.config.js

export default {
  mode: 'universal',
  devtools: true,

  ...
}

Надеюсь, что эту помощь кто-то остановил здесь.

person herla    schedule 29.06.2020

arrow_upward
1
arrow_downward

Как заявил @joshua jackson, у меня работал, а devtools: true НЕ.

Версия:

Nuxt.js v2.10.0

Vue v2.6.10

vue: {
  config: {
    productionTip: false,
    devtools: true
  }
}
person Despertaweb    schedule 16.07.2020
comment
Я нашел здесь фрагмент: nuxtjs.org/api/configuration-vue-config - person Rocky Kev; 02.09.2020

arrow_upward
0
arrow_downward

Я изо всех сил пытался заставить это работать и попробовал все шаги, написанные здесь.

Моя проблема заключалась в том, что мне пришлось запустить сервер на указанном порту.

server: {
  port: process.env.PORT || 5000,
  host: '0.0.0.0'
},

Добавление этого в nuxt.config.js решило проблему.

person dignitas    schedule 11.12.2020
comment
Чтобы добавить к этому, если вы форсируете другой порт, не указав его в конфигурации nuxt, как показано выше, он всегда будет пытаться загрузить инструменты разработчика. У меня всегда было лучше держать его на 3000 - person Titan; 04.04.2021