自定义Nuxt.js组件目录的正确配置是什么?

Question

<h1>Hello people</h1>

我正在学习使用 nuxt.js我的问题是关于使用与使用 nuxt 制作的应用程序的默认结构不同的自定义目录.js

The issue: index.vue can't load .vue components from my components custom dir

在nuxt.config.file中，我有这个conf：

/*
**Custom directory structure configuration paths
**Change as desires
**Important Note: This is a function not well documented on nuxt.org
*/
dir: {
views: 'views',
components: 'views/components', 
layouts: 'views/layouts',
pages: 'views/pages',
controllers: 'controllers/',
middleware: 'controllers/middleware',
models: 'models',
data: 'models/data',
files: 'models/files',
store: 'models/store',
sources: 'sources',
assets: 'sources/assets',
static: 'sources/static'
},

并在 nuxt 的 index.vue 默认文件中创建项目组合，并在文件末尾包含此内容

<script>
import Logo from '~components/Logo.vue'
import VuetifyLogo from '~components/VuetifyLogo.vue'
export default {
components: {
Logo,
VuetifyLogo
}
}
</script>

作为和额外的数据，默认情况下jsconfig.json文件的内容是

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".nuxt", "dist"]
}

外壳或逗号提示符中的错误消息是

ERROR  Failed to compile with 2 errors                friendly-errors 12:12:09
These dependencies were not found:                    friendly-errors 12:12:09
friendly-errors 12:12:09
* ~/components/Logo.vue in 
./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib
??vue-loader-options!./views/pages/index.vue?vue&type=script&lang=js&
* ~/components/VuetifyLogo.vue in 
./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib
??vue-loader-options!./views/pages/index.vue?vue&type=script&lang=js&
friendly-errors 12:12:09
To install them, you can run: npm install --save ~/components/Logo.vue ~/components/VuetifyLogo.vue

localhost/3000 上的错误消息是

Module not found: Error: Can't resolve 
'~/components/Logo.vue' 
in '/home/user/desktop/nuxt/views/pages'
Module not found: Error: Can't resolve 
'~/components/VuetifyLogo.vue' 
in '/home/user/desktop/nuxt/views/pages'

我不知道为什么在"视图/页面/">

上寻找组件，如果我已经在"视图/组件/"中定义了组件，将"视图"定义为"视图"，有关我所做的事情的更多信息，请参见：

https://forum.vuejs.org/t/anyone-know-how-to-rename-move-a-nuxt-folder/44876/2

使用默认目录结构时没有错误。

！节日快乐

Answer 1

摘自Nuxt文档：https://nuxtjs.org/docs/features/component-discovery/

如果嵌套目录中有组件，例如：

| 组件/

--| 基地/

----| foo/

------|按钮.vue

组件名称将基于其自己的路径目录和 文件名。因此，该组件将是：

BaseFooButton