vue-devtools 在 nuxt.js 中始终禁用

Question

vue-devtools 在 nuxt.js 中始终禁用

vue.jsnuxt.jsvue-devtools

13

我正在使用nuxt.js v2.3.0 创建一个新项目。当我在我的IDE控制台中运行npm run dev时，一切都正确编译，但当我打开页面时，出现以下错误：检测到Nuxt.js + Vue.js在此页面上。由于处于生产模式或作者明确禁用，无法使用Devtools进行检查。

这是我的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能够正常运行。

- joshua jackson

你如何运行你的应用程序？ - Aldarund

@Aldarund 我在我的 IDE 控制台中使用 'npm run dev' 并在 Chrome 中运行应用程序。 - joshua jackson

6个回答

5

tl:dr:

通过在nuxt.config.js中设置vue.config.devtools = true无法使Vue-Devtools正常工作。可以使用nuxt generate --devtools命令生成应用程序并用nuxt start 启动应用程序，然后在浏览器中打开网站以使用Vue-Devtools。之后即使在运行nuxt dev时没有在nuxt.config.js中设置vue.config.devtools标志，Vue-Devtools仍可用。

Full story

如同接受的答案所述，通过在vue.config中启用devtools标志对我也不起作用。
我首先尝试按照这里所述强制启用Vue-Devtools（添加一个插件来设置window属性），但是没有成功。
在了解Nuxt代码后，我发现了generate命令的--devtools标志，并想看看Vue-Devtools是否与Nuxt一起工作。
运行nuxt generate --devtools，然后使用nuxt start 启动应用程序，我最终可以访问Devtools。
现在，即使在运行nuxt dev时没有在我的nuxt.config.js中设置vue.config.devtools，它们仍然可用。可能有些奇怪，但也许这对某些人有帮助。
更多情况：我在spa模式下运行Nuxt，以目标static进行构建应用程序。因为我没有Node服务器在后端，并且只想构建一个SPA。

- Jan-Luca Klees

我喜欢这个答案。因为仅仅为了调试而更改代码是没有意义的。 - Ajeeb.K.P

3

正如 @joshua jackson 所述，对我有用的是 devtools: true，而不是 devtools: true。

版本：

Nuxt.js v2.10.0

Vue v2.6.10

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

- Despertaweb

我在这里找到了代码片段：https://nuxtjs.org/api/configuration-vue-config/ - Rocky Kev

2

在nuxt.config.js中

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

  ...
}

希望这能帮助到那些停留在这里的人。

- herla

0

对我来说，在nuxt.config.js中设置vue.config.devtools = true没有起作用。但是我通过以下步骤解决了这个问题：

扩展程序
在Vue Dev Tools扩展程序右侧的三个点
管理扩展程序
打开“允许访问文件网址”
重新启动浏览器，就可以了

希望能帮到你 :)

- Miha Mulej

-1

我曾经为了让这个工作起来而苦苦挣扎，尝试了这里写的所有步骤。

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

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

将以下代码添加到 nuxt.config.js 中即可解决问题。

- dignitas

此外，如果您强制使用不同的端口而没有在nuxt配置中指定它，它将始终难以加载开发工具。对我来说，将其保持在3000上始终效果最佳。 - Titan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- joshua jackson · Accepted Answer

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

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

现在 devtools 显示出来了