Nuxt.js项目目录详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_36096211/article/details/107492044

本文介绍了Nuxt.js项目的目录结构，包括assets、components、layouts、middleware、pages、plugins、static、Store等目录的作用，以及nuxt.config.js和package.json文件的功能。详细解释了各目录下的文件如何影响应用的路由、组件、状态管理和静态资源处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三、目录结构

-|nuxtTest/				(项目根目录)
--|assets/				(资源目录)
--|components/			(组件目录)
--|layouts/				(布局目录)
--|middleware/			(中间件目录)
--|node_modules/		()
--|pages/				(页面目录)
--|plugins/				(插件目录)
--|static/				(静态资源目录)
--|store/				(Vuex状态树)
--|.editorconfig		()
--|.eslintrc.js			()
--|.gitignore			()
--|.prettierrc			()
--|nuxt.config.js		(Nuxt个性化配置)
--|package-lock.json	()
--|package.json			()
--|README.md			()

assets：资源目录（用于组织未编译的静态资源如LESS、SASS或JavaScript）
components：组件目录（用于组织应用的Vue.js组件，Nuxt.js不会扩展增强该目录下的Vue.js组件，这些组件将不会像页面组件那样具备asyncData方法的特性）
layouts：布局目录（用于组织应用的布局组件，没有额外配置的话，该目录不能被重命名）
middleware：中间件目录（用于存放应用的中间件）
pages：页面目录（用于组织应用的路由及视图。Nuxt.js框架将读取该目录下所有的.vue文件并自动生成对应的路由配置。没有额外配置的话，该目录不能被重命名）
plugins：插件目录（用于组织那些需要在根vue.js应用实例化之前需要运行的JavaScript插件）
static：静态文件目录（用于存放应用的静态文件，此类文件不会被Nuxt.js调用Webpack进行构建编译处理。服务器启动时，该目录下的文件会映射至应用的根路径/下。举个例子：/static/robots.txt映射至/robots.txt。没有额外配置的话，该目录不能被重命名。）
Store：Store目录（用于组织应用的Vuex状态树文件。Nuxt.js框架集成了Vuex状态树的相关功能配置，在store目录下创建一个index.js文件将激活这些配置。没有额外配置的话，该目录不能被重命名）
nuxt.config.js文件：用于组织Nuxt.js应用的个性化配置，以便覆盖默认配置。没有额外配置的话，该文件不能被重命名。
package.json文件：用于描述应用的依赖关系和对外暴露的接口脚本。该文件不能被重命名。
别名：~或@ 对应 srcDir；~~或@@对应rootDir。默认情况下，srcDir和rootDir相同。（在vue模板中，如果需要引入assets或者static目录，使用~/assets/xxx.png和~/static/xxx.png方式）。

参考：https://www.nuxtjs.cn/guide/directory-structure