vue-devtools 总是被 nuxt.js 禁用
vue-devtools always disabled with nuxt.js
我正在使用 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 正常 运行ning。
我必须将以下内容添加到 nuxt.config.js:
vue: {
config: {
productionTip: false,
devtools: true
}
}
现在开发工具出现了
在nuxt.config.js
export default {
mode: 'universal',
devtools: true,
...
}
希望这对停在这里的人有所帮助。
正如@joshua jackson 所说对我有用,而 devtools: true
没有。
版本:
Nuxt.js v2.10.0
Vue v2.6.10
vue: {
config: {
productionTip: false,
devtools: true
}
}
tl:博士:
vue.config.devtools = true
在我的 nuxt.config.js
中对我不起作用。
- 我 运行
nuxt generate --devtools
,然后 nuxt start
并在我的浏览器中打开了该网站。这样做我可以使用 Vue-Devtools.
- 之后我仍然可以使用 Vue-Devtools,即使 运行
nuxt dev
并且 nuxt.config.js
[=50 中没有设置 vue.config.devtools
标志=]
全文
因此,在 vue.config
中启用 devtools
标志与在 中一样对我也不起作用。
我首先尝试按照 here 所述强制执行 Vue-Devtools。添加插件以设置 window
属性,如 link 中所述。但运气不好。
深入研究 Nuxt 代码,我注意到 generate
命令的 --devtools
标志,想看看 Vue-Devtools 是否适用于 Nuxt。
在 运行 nuxt generate --devtools
之后,然后使用 nuxt start
服务应用程序,我终于可以访问 devtools。
现在,即使 运行 nuxt dev
它们仍然可以访问。我的 nuxt.config.js
中根本没有设置 vue.config.devtools
。诡异的。但也许这对某人有帮助。
更多上下文:我是 运行 Nuxt,处于 spa
模式,目标 static
因为我在后端没有节点服务器,只想构建一个 SPA .
我一直在努力让它工作并尝试了这里写的所有步骤。
我的问题是我必须 运行 指定端口上的服务器。
server: {
port: process.env.PORT || 5000,
host: '0.0.0.0'
},
将此添加到 nuxt.config.js
解决了问题。
我正在使用 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 正常 运行ning。
我必须将以下内容添加到 nuxt.config.js:
vue: {
config: {
productionTip: false,
devtools: true
}
}
现在开发工具出现了
在nuxt.config.js
export default {
mode: 'universal',
devtools: true,
...
}
希望这对停在这里的人有所帮助。
正如@joshua jackson 所说对我有用,而 devtools: true
没有。
版本:
Nuxt.js v2.10.0
Vue v2.6.10
vue: {
config: {
productionTip: false,
devtools: true
}
}
tl:博士:
vue.config.devtools = true
在我的nuxt.config.js
中对我不起作用。- 我 运行
nuxt generate --devtools
,然后nuxt start
并在我的浏览器中打开了该网站。这样做我可以使用 Vue-Devtools. - 之后我仍然可以使用 Vue-Devtools,即使 运行
nuxt dev
并且nuxt.config.js
[=50 中没有设置vue.config.devtools
标志=]
全文
因此,在 vue.config
中启用 devtools
标志与在
我首先尝试按照 here 所述强制执行 Vue-Devtools。添加插件以设置 window
属性,如 link 中所述。但运气不好。
深入研究 Nuxt 代码,我注意到 generate
命令的 --devtools
标志,想看看 Vue-Devtools 是否适用于 Nuxt。
在 运行 nuxt generate --devtools
之后,然后使用 nuxt start
服务应用程序,我终于可以访问 devtools。
现在,即使 运行 nuxt dev
它们仍然可以访问。我的 nuxt.config.js
中根本没有设置 vue.config.devtools
。诡异的。但也许这对某人有帮助。
更多上下文:我是 运行 Nuxt,处于 spa
模式,目标 static
因为我在后端没有节点服务器,只想构建一个 SPA .
我一直在努力让它工作并尝试了这里写的所有步骤。
我的问题是我必须 运行 指定端口上的服务器。
server: {
port: process.env.PORT || 5000,
host: '0.0.0.0'
},
将此添加到 nuxt.config.js
解决了问题。