vue-devtools 总是被 nuxt.js 禁用

Posted 2023-04-13

【中文标题】vue-devtools 总是被 nuxt.js 禁用

【英文标题】：vue-devtools always disabled with nuxt.js

【发布时间】：2019-04-20 03:44:14

【问题描述】：

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

【问题讨论】：

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

@Aldarund 我在 IDE 控制台中使用“npm run dev”并在 Chrome 中运行应用程序

【参考方案1】：

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

vue: 
  config: 
    productionTip: false,
    devtools: true
  

现在 devtools 出现了

【讨论】：

这个工作时你运行的是什么版本？我在最新的 v2.4.5 上，没有运气。 nuxtjs.org/api/configuration-build#devtools 表示我们应该能够在构建配置中将 devtools 设置为 true 但这对我也不起作用（也不与此结合使用）。

【参考方案2】：

tl:dr:

我的nuxt.config.js 中的vue.config.devtools = true 对我不起作用。 我运行nuxt generate --devtools，然后运行nuxt start，并在浏览器中打开了该网站。这样做我可以使用 Vue-Devtools。 之后，我现在仍然可以使用 Vue-Devtools，即使在运行 nuxt dev 并且我的 nuxt.config.js 中没有设置 vue.config.devtools 标志时也是如此

全文

所以在vue.config 中启用devtools 标志就像在accepted answer 中一样对我也不起作用。

我首先尝试按照here 的描述强制使用 Vue-Devtools。添加插件以设置window 属性，如链接中所述。但没有运气。

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

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

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

【参考方案3】：

在 nuxt.config.js 中

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

  ...

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

【参考方案4】：

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

版本：

Nuxt.js v2.10.0

Vue v2.6.10

vue: 
  config: 
    productionTip: false,
    devtools: true
  

【讨论】：

我在这里找到了 sn-p：nuxtjs.org/api/configuration-vue-config

【参考方案5】：

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

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

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

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

【讨论】：

添加到这一点，如果你强制一个不同的端口而不在 nuxt 配置中指定它，如上所示，它总是难以加载开发工具。一直保持在 3000 对我来说效果最好