Nuxt的目录结构和常用配置

最新推荐文章于 2025-03-03 14:05:35 发布

Piconjo_Official

最新推荐文章于 2025-03-03 14:05:35 发布

阅读量4.9k

点赞数

分类专栏：前端文章标签： vue nuxt vue.js nuxt.js

本文链接：https://blog.youkuaiyun.com/Piconjo/article/details/105977381

版权

前端专栏收录该内容

99 篇文章

订阅专栏

本文详细介绍了Nuxt项目的目录结构，包括.nuxt、assets、components、layouts、middleware、node_modules、pages、plugins、static和store等目录的作用。同时，文章还讲解了如何配置主机地址和端口、全局CSS以及loader，帮助开发者更好地理解和使用Nuxt框架。

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

一、目录结构

Nuxt项目的基本目录：

在这里插入图片描述
其中：

□.nuxt：

在npm run dev启动项目的时候自动生成的临时文件类似于vue的dist
通常无需多关注

□assets：

静态资源目录
通常用于放置LESS SASS JavaScript文件

□components：

存放自己写的Vue的组件

□layouts：

存放布局文件

□middleware：

存放中间件

□node_modules：

存放npm install的安装的所有依赖包

□pages：

主目录用于存放页面
Nuxt框架会读取该目录下所有的.vue文件并自动生成对应的路由配置

□plugins：

存放JavaScript插件

□static：

存放资源文件例如图片和图标
在服务器启动时该目录下的文件会映射至应用的根路径 / 下
例如：/static/a.jpg会被映射至/a.jpg

□store：

存放Vuex的存储文件

△editorconfig.org：

编辑工具(例如VScode)的默认规则

△.eslintrc.js：

ESlint的配置规则文件

△.gitignore：

Git在提交时不上传到仓库的文件

△nuxt.config.js：

Nuxt的配置文件该文件将覆盖默认配置

该文件中的head对应配置的是HTML的<head>标签内的内容
Vue文件是没有<head>标签的只有<template>标签因此无法配置只能借助此文件进行配置

 head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

△package.json：

包管理的配置文件
描述项目及项目所依赖的模块信息

{
  "name": "nuxt-study",
  "version": "1.0.0",
  "description": "My prime Nuxt.js project",
  "author": "Piconjo",
  "private": true,
  "scripts": { // 脚本 用npm run启动
    "dev": "nuxt",
    "build": "nuxt build", // 生成.nuxt目录
    "start": "nuxt start",
    "generate": "nuxt generate", // 生成dist目录
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "dependencies": { // 生产环境下的包和版本
    "nuxt": "^2.0.0"
  },
  "devDependencies": { // 开发环境下的包和版本
    "@nuxtjs/eslint-config": "^2.0.0",
    "@nuxtjs/eslint-module": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": ">=0.4.2"
  }
}

△package-lock.json：

描述node_modules文件中所有模块的版本模块来源及依赖的小版本信息
从npm5.x版本之后只要使用npm install命令下载包即自动生成package-lock.json文件

别名

~ 或 @ 相当于 src目录
~~ 或 @@ 相当于 root目录

例：要引入static目录下a.png文件
使用~/static/a.png或@/static/a.png

二、常用配置

配置主机地址和端口：

在package.json里配置

"config":{
    "nuxt":{
      "host":"127.0.0.1",
      "port":"3000"
    }
  },

配置全局CSS

在多页应用中若一个初始CSS引用了多个CSS 或是有全局样式此时需要进行配置
在nuxt.config.js中进行配置
在css选项中配置css文件的路径：

css: [
  "~/assets/css/normalize.css"
],

配置loader

在Nuxt里没有webpack的配置文件而是集合到nuxt.config.js里了因此需在nuxt.config.js里进行配置
在build里配置loaders：

build: {
    /*
    ** You can extend webpack config here
    */
   loaders:[
     {test:/\.png|jpe?g|gif|svg$/,loader:"url-loader",query:{limit:10000,name:"img[name].[hash].[ext]"}}
   ]
  }