我正在使用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正常运行。
6条答案
按热度按时间yquaqz181#
我不得不将以下内容添加到nuxt.config.js中:
现在devtools出现了
holgip5t2#
时间:医生:
nuxt.config.js
中的vue.config.devtools = true
不适用。nuxt generate --devtools
,然后运行nuxt start
,在浏览器中打开网站,这样我就可以使用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。cpjpxq1n3#
正如@约书亚Jackson所说的那样,
devtools: true
对我有效,而devtools: true
却无效。版本:
Nuxt.js版本2.10.0
Vue版本2.6.10
ojsjcaue4#
在nuxt.config.js中
希望这个帮助有人停在这里。
hm2xizp95#
我一直在努力让这个工作,并尝试了所有的步骤写在这里。
我的问题是我必须在指定的端口上运行服务器。
将此添加到
nuxt.config.js
解决了问题。llmtgqce6#
对我来说,在
nuxt.config.js
中设置vue.config.devtools = true
不起作用,但我设法解决了这个问题,方法是希望有帮助:)