首页 > 其他分享 >【Nut3】nuxt.config.ts项目nuxt配置文件介绍

【Nut3】nuxt.config.ts项目nuxt配置文件介绍

时间:2024-03-15 18:30:01浏览次数:22  
标签:配置文件 配置 Nut3 plugins Nuxt config css nuxt

简言

记录下nuxt3的nuxt.config.ts文件的介绍和使用。
Nuxt Configuration

nuxt.config.ts

Nuxt可以通过一个单独的nuxt.config文件进行简单配置。

配置文件创建

nuxt.config文件的扩展名可以是.js、.ts或.mjs。
然后默认导出全局函数defineNuxtConfig的返回值,
defineNuxtConfig函数接收一个对象,可以在这个对象内进行相关配置。

defineNuxtConfig可以在全局范围内直接使用,无需导入,也可以从nuxt/config中显式导入defineNuxtConfig。

是ts文件时,ts类型提示可能报错,可以像我这样写,虽然没有ts类型语法提示(nuxt3源码没有),但不出现报错了。

import { defineNuxtConfig,NuxtConfig } from 'nuxt/config'
import type { InputConfig, ConfigLayerMeta } from 'c12'
export default defineNuxtConfig({
  // 我的Nuxt配置
} as InputConfig<NuxtConfig, ConfigLayerMeta>)

常用配置项介绍

配置项非常多,下面只介绍下常用的配置项使用方法。

rootDir

定义应用程序的根目录。
默认值:“/<rootDir>”,也就是你的项目路径。

通常不需要配置该选项。

alias

资源别名。
可以通过定义其他别名来访问 JavaScript 和 CSS 中的自定义目录。
默认值:

{
  "~": "/<srcDir>",
  "@": "/<srcDir>",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "assets": "/<srcDir>/assets",
  "public": "/<srcDir>/public"
}

在 webpack 上下文(图像源、CSS,但不包括 JavaScript)中,访问别名时必须使用 ~ 作为前缀。

可以自定义配置:

import { fileURLToPath } from "node:url"
export default {
  alias: {
    'images': fileURLToPath(new URL('./assets/images', import.meta.url)),
    'style': fileURLToPath(new URL('./assets/style', import.meta.url)),
    'data': fileURLToPath(new URL('./assets/other/data', import.meta.url))
  }
}

analyzeDir

设置 运行 nuxt analyze 代码分析命令 生成分析文件的目录。

默认 “/<rootDir>/.nuxt/analyze”(根目录下的.nuxt目录下的analyze文件夹)

app

应用程序配置,就是你这项目应用的一些配置,例如设置head信息、根元素id等。

大部份属性可以在单个页面上通过 definePageMeta 来重写。只允许使用可序列化的 JSON 值。

head

为每个页面的 设置默认配置。
默认值:

{
  "meta": [
    {
      "name": "viewport",
      "content": "width=device-width, initial-scale=1"
    },
    {
      "charset": "utf-8"
    }
  ],
  "link": [],
  "style": [],
  "script": [],
  "noscript": []
}

里面的只和html需要的属性值对应,只不过你要转成对象形式,例如:

app: {
  head: {
    meta: [
      // <meta name="viewport" content="width=device-width, initial-scale=1">
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    script: [
      // <script src="https://myawesome-lib.js"></script>
      { src: 'https://awesome-lib.js' }
    ],
    link: [
      // <link rel="stylesheet" href="https://myawesome-lib.css">
      { rel: 'stylesheet', href: 'https://awesome-lib.css' }
    ],
    // please note that this is an area that is likely to change
    style: [
      // <style type="text/css">:root { color: red }</style>
      { children: ':root { color: red }', type: 'text/css' }
    ],
    noscript: [
      // <noscript>JavaScript is required</noscript>
      { children: 'JavaScript is required' }
    ]
  }
}

layoutTransition

布局转换过渡效果,默认不启用。
示例:

layoutTransition: { name: 'layout', mode: 'out-in' }
pageTransition

页面的过渡效果,默认不启用。
示例:

pageTransition: { name: 'page', mode: 'out-in' },
rootId

自定义 Nuxt 根元素 ID名。
默认"__nuxt"

rootTag

自定义 Nuxt 根元素标签。
默认“div”.

components

配置 Nuxt 组件自动注册。
此处配置的目录中的任何组件都可以在页面、布局(和其他组件)中使用,而无需明确导入。

默认值:

{
  "dirs": [
    {
      "path": "~/components/global",
      "global": true
    },
    "~/components"
  ]
}

看默认值是 components文件夹下是自动导入的。

css

全局设置(包含在每个页面中)的 CSS 文件/模块/库。
这个和nuxt2相似,有要全局引入的css文件可以在这配置。

Nuxt 会根据扩展名自动猜测文件类型,并使用相应的预处理器。如果需要使用,仍需安装所需的加载器。

css: [
  // Load a Node.js module directly (here it's a Sass file).
  'bulma',
  // CSS file in the project
  '~/assets/css/main.css',
  // SCSS file in the project
  '~/assets/css/main.scss'
]

debug

是否启用调试模式。
默认不开启,开启后会在服务器上打印钩子名称和时间,并在浏览器中记录钩子参数。

devtools

启用 Nuxt DevTools 进行开发。默认好像是启用的,可以enabled设置为false关掉。

  devtools: { enabled: true },

plugins

nuxt 应用程序插件数组。
每个插件可以是一个字符串(可以是文件的绝对路径或相对路径)。如果以 .client 或 .server 结尾,则只会在适当的上下文中自动加载。它也可以是一个包含 src 和 mode 键的对象。

plugins: [
  '~/plugins/foo.client.js', // only in client side
  '~/plugins/bar.server.js', // only in server side
  '~/plugins/baz.js', // both client & server
  { src: '~/plugins/both-sides.js' },
  { src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
  { src: '~/plugins/server-only.js', mode: 'server' } // only on server side
]

插件也会在 ~/plugins 目录中自动注册,除非需要自定义顺序,否则无需在 nuxt.config 中列出这些插件。

postcss

里面有个plugins属性是配置 PostCSS 插件的选项。
postcss是css的转换工具,写h5时经常用这个。

    postcss: {
        plugins: {
            // 这个工具可以实现自动添加CSS3前缀
            "autoprefixer": {
              overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"]
            },
            'postcss-pxtorem': {
                rootValue: 37.5, // 指定转换倍率,我现在设置这个表示1rem=37.5px;
                propList: ['*'], // 属性列表,表示你要把哪些css属性的px转换成rem,这个*表示所有
                mediaQuery: false, // 是否允许使用媒体查询,false媒体查询的代码可用,true不可用
                exclude: 'ignore',
                replace: true, // 替换包含rem的规则,而不是添加回退
                minPixelValue: 1, // 需要转换的最小值,一般1px像素不转换,以上才转换
                unitPrecision: 6, // 转换成rem单位的小数点后的保留位数
                selectorBalckList: ["van"], // 匹配不被转换为rem的选择器
            },
        },
    },

modules

模块是 Nuxt 扩展模块。
每个模块既可以是一个字符串(可以指一个软件包,也可以是一个文件的路径),也可以是一个元组(第一个字符串是模块,第二个对象是选项),还可以是一个内联模块函数。Nuxt 会尝试使用 node require path(在 node_modules 中)解析模块数组中的每个项目,如果使用 ~ alias,则会从项目 srcDir 解析。

模块是按顺序执行的,因此顺序很重要。

modules: [
  // Using package name
  '@nuxtjs/axios',
  // Relative to your project srcDir
  '~/modules/awesome.js',
  // Providing options
  ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
  // Inline definition
  function () {}
]

devServer

项目的开发服务配置,和vite、webpack类似。

host

服务监听地址。

https

是否启用 HTTPS。

export default defineNuxtConfig({
  devServer: {
    https: {
      key: './server.key',
      cert: './server.crt'
    }
  }
})

port

服务监听端口。

nitro

nitro配置,是一个对象。nuxt3的开发服务是基于nitro实现的。
这里可以配置跨域代理。

 nitro: {
    devProxy: {
      '/api/': {
        target: 'http:192.168.9.70:3000/api/',
        changeOrigin: true
      }
    }
  },

build

共享的打包构建配置。
默认是vite打包,所以这个不用特别设置。

ssr

是否开启ssr,默认为true。

typescript

配置 Nuxt 的 TypeScript 集成。
建议不改动,默认设置就挺好。
示例:
关闭构建类型检查,类型补充提示使用编辑器的插件:

typescript: {
    typeCheck: false,
    shim: false,
  },

vite

将直接传递给 Vite 的配置。
支持mode、clearScreen、esbuild、optimizeDeps、resolve等。

vue

vue的配置项。

compilerOptions

相当于app.config.compilerOptions

webpack

webpack的配置。

extensions

应由 Nuxt 解析器解析的扩展名。

[
  ".js",
  ".jsx",
  ".mjs",
  ".ts",
  ".tsx",
  ".vue"
]

extends

从多个本地或远程来源扩展配置文件(个人理解)。
值应该是一个字符串或字符串数组,指向源目录或相对于当前配置的配置路径。

extends: [
    './base.nuxt.config.ts'
  ],

官网上意思好像是扩展项目用的,也没给示例,我理解不到具体应用场景,所以我当扩展配置文件来使用。

示例

// https://nuxt.com/docs/api/configuration/nuxt-config
import type { InputConfig, ConfigLayerMeta } from 'c12'

import { defineNuxtConfig, NuxtConfig, } from "nuxt/config";
import { fileURLToPath } from "node:url"

export default defineNuxtConfig({
  rootDir: "./",
  extends: [
    './base.nuxt.config.ts'
  ],
  typescript: {
    typeCheck: false,
    shim: false
  },
  //  这些样式表将内联到 Nuxt 渲染的 HTML 中,全局注入并出现在所有页面中。
  css: ['mavon-editor/dist/css/index.css', '~/assets/base.css', '~/assets/main.css'],
  //  别名
  alias: {
    "@/": "/<rootDir>/",
    "img": fileURLToPath(new URL('./assets/img', import.meta.url))
  },
  modules: [
    '@pinia/nuxt'
  ],
  plugins: [
    // '~/plugins/ant-design-vue',
    // '~/plugins/vue-use',
    // {
    //   src: '~/plugins/markdown.client.ts',
    //   mode: 'client'
    // },
    // {
    //   src: '~/plugins/barrier-free.client.ts',
    //   mode: 'client'
    // }
  ],
  // imports: {
  //   autoImport: true, //  自动导入
  //   dir: []
  // },
  debug: false,
  devServer: {
    host: '0.0.0.0',
    port: 5000,
  },

  nitro: {
    devProxy: {
      '/api/': {
        target: 'http:192.168.9.70:3000/api/',
        changeOrigin: true
      }
    }
  },
  devtools: { enabled: true },
  ssr: true,
  extractCSS: process.env.NODE_ENV === 'production',
} as InputConfig<NuxtConfig, ConfigLayerMeta>) 

结语

nuxt3由于可以是全栈的嘛,配置文件属性太多了,而且有的配置方法不只一种,所以配置详情请到官网查看,这里仅供参考。

标签:配置文件,配置,Nut3,plugins,Nuxt,config,css,nuxt
From: https://blog.csdn.net/qq_43231248/article/details/136701437

相关文章

  • nuxt3前端开发教程
    源码请移步:springboot+vue3+nuxt3+ts+minio开发的dsblog3.0前后端博客-java大师(javaman.cn)目录结构如下:一、nuxt3配置文件这段代码是一个Nuxt.js的配置文件,用于定义Nuxt.js项目的配置选项。Nuxt.js是一个基于Vue.js的通用应用框架,它简化了Vue.js项目的创建和开发过程。......
  • Mybatis20_MyBatis核心配置文件深入7
    一、typeHandler概述无论是MyBatis在预处理语句(PreparedStatement)中设置一个参数时,还是从结果集中取出一个值时,都会用类型处理器将获取的值以合适的方式转换成Java类型。下表描述了一些默认的类型处理器(截取部分)。你可以重写类型处理器或创建你自己的类型处理器来......
  • Spring Boot 2.x中配置文件加载顺序分析
    一般springboot2.x的配置有多种方式,如resources文件夹中可以定义bootstrap.yml(或bootstrap.properties)、application.yml(或application.properties)、配置中心(如nacos),那么它们加载顺序是怎样的,如何使用?bootstrap.yml:首先加载bootstrap.yml(或bootstrap.properties)。这个......
  • nuxt3_在nuxt3中创建并使用全局sass样式文件
    在/assets/scss/global.scss中写入样式$black:#000;$height:1666px;.test{color:red;background-color:$black;height:$height;}在/nuxt.config.ts文件中写入如下:exportdefaultdefineNuxtConfig({vite:{css:{preprocessorOptions:{......
  • 如何查看docker 项目的配置文件
    目录如何查看Docker项目的配置文件方法一:通过Docker命令查看配置文件方法二:通过数据卷挂载方式查看配置文件方法三:使用Docker可视化工具查看配置文件示例场景方法一:通过Docker命令查看配置文件方法二:通过数据卷挂载方式查看配置文件方法三:使用Docker可视化工具查看配......
  • 每天进步一点点-nginx.conf配置文件解析转载
    #nginx.conf文件#定义Nginx运行的用户和用户组userwwwwww;#nginx进程数,建议设置为等于CPU总核心数。worker_processes8;#全局错误日志定义类型,[debug|info|notice|warn|error|crit]error_log/usr/local/nginx/logs/error.loginfo;#进程pid文件pid/u......
  • K8S初始化master单节点(不使用配置文件,直接只用Kebuadm init)
    该文章主要记录初始化过程,及过程中遇到的问题卸载之前安装过的K8s集群点击查看详细代码#首先清理运行到k8s群集中的pod,使用kubectldeletenode--all#使用脚本停止所有k8s服务forserviceinkube-apiserverkube-controller-managerkubectlkubeletetcdkube-proxy......
  • Visual Studio Code 配置文件关联
    在编写Linux的.service文件的时候,我发现.service文件的本质是INI文件。然而VSCode却并没有使用INI格式进行语法高亮。于是我通过如下设置使VSCode在遇到.service文件时自动使用INI格式的语法高亮:打开设置,搜索:files.associations,并添加一个项目:ItemValue......
  • 在Docker中,Docker配置文件在哪里以及如何修改?
    Docker的主要配置文件通常位于Linux系统的/etc/docker/目录下,关键的配置文件是daemon.json。这个文件用于配置Docker守护进程(DockerDaemon)的各项参数,包括但不限于数据存储位置、网络设置、日志配置、信任代理等。查找和修改Docker配置文件的步骤如下:定位配置文件:Docker的......
  • nginx配置文件结构详解
    nginx配置文件(conf文件夹下nginx.conf文件为nginx配置文件)结构详解:main块(全局块):nginx全局信息,指令的相关配置events块:nginx工作模式,与用户网络连接的相关配置http块:http协议信息,代理,缓存,日志大多数功能和第三方模块的的相关配置server块:虚拟主机的相关配置(一个http块中可有......