vue-devtools始终使用nuxt.js禁用

eqqqjvef  于 2023-03-19  发布在  Vue.js
关注(0)|答案(6)|浏览(159)

我正在使用nuxt.js v2.3.0创建一个新项目。当我在IDE控制台中运行npm run dev时,所有内容都正确编译,但当我转到页面时,我收到以下错误: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正常运行。

yquaqz18

yquaqz181#

我不得不将以下内容添加到nuxt.config.js中:

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

现在devtools出现了

holgip5t

holgip5t2#

时间:医生:

  • 我的nuxt.config.js中的vue.config.devtools = true不适用。
  • 我运行nuxt generate --devtools,然后运行nuxt start,在浏览器中打开网站,这样我就可以使用Vue-Devtools了。
  • 在此之后,我现在仍然可以使用Vue-Devtools,即使运行nuxt dev并且在我的nuxt.config.js中没有设置vue.config.devtools标志

完整的故事

因此,像在accepted answer中那样在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,因为我在后端没有节点服务器,只想构建一个SPA。

cpjpxq1n

cpjpxq1n3#

正如@约书亚Jackson所说的那样,devtools: true对我有效,而devtools: true却无效。

版本:

Nuxt.js版本2.10.0
Vue版本2.6.10

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

ojsjcaue4#

在nuxt.config.js中

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

  ...
}

希望这个帮助有人停在这里。

hm2xizp9

hm2xizp95#

我一直在努力让这个工作,并尝试了所有的步骤写在这里。
我的问题是我必须在指定的端口上运行服务器。

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

将此添加到nuxt.config.js解决了问题。

llmtgqce

llmtgqce6#

对我来说,在nuxt.config.js中设置vue.config.devtools = true不起作用,但我设法解决了这个问题,方法是

  • 延伸导线
  • vue开发工具扩展右侧的三个点
  • 管理扩展
  • 打开“允许访问文件URL”
  • 重新启动浏览器,就是这样

希望有帮助:)

相关问题