8

我正在使用 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 能够正常运行。

4

5 回答 5

20

我必须在 nuxt.config.js 中添加以下内容：

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

现在 devtools 出现了

于 2018-11-17T12:43:40.480 回答
2

在 nuxt.config.js

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

  ...
}

希望这有助于有人停在这里。

于 2020-06-29T04:44:50.633 回答
2

tl：博士：

  • 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 。添加插件以设置window链接中描述的属性。但没有运气。

挖掘 Nuxt 代码，我注意到命令的--devtools标志，generate并想看看 Vue-Devtools 是否可以与 Nuxt 一起工作。

运行后nuxt generate --devtools，然后使用 为应用程序提供服务nuxt start，我终于可以访问 devtools。
现在，即使在运行时，nuxt dev它们仍然可以访问。而且我vue.config.devtools的nuxt.config.js. 诡异的。但也许这对某人有帮助。

更多上下文：我在spa模式下运行 Nuxt，目标static是因为我在后端没有节点服务器，只是想构建一个 SPA。

于 2020-10-09T10:08:45.383 回答
1

正如@joshua jackson 所说，对我有用，而devtools: true没有。

版本：

Nuxt.js v2.10.0

Vue v2.6.10

vue: {
  config: {
    productionTip: false,
    devtools: true
  }
}
于 2020-07-16T10:56:04.603 回答
0

我一直在努力让这个工作，并尝试了这里写的所有步骤。

我的问题是我必须在指定端口上运行服务器。

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

添加这个来nuxt.config.js解决问题。

于 2020-12-11T21:01:53.490 回答