Nuxt快速学习开发 -- Nuxt3配置

Nuxt配置

nuxt.config.ts文件位于 Nuxt 项目的根目录下，可以覆盖或扩展应用程序的行为

使用可组合项，这些变量会暴露给应用程序

//··nuxt.config.ts
import { fileURLToPath } from "url";
​
export default defineNuxtConfig({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", import.meta.url)),},
​//运行时的配置,该对象的值只能从服务器使用 访问useRuntimeConfig。它主要应该持有不暴露在前端的私有配置。这可能包括对您的 API 秘密令牌的引用。public和下的任何东西app也会暴露在前端。在运行时，值会自动替换为匹配的环境变量，例如，设置环境变量NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/会覆盖下面示例中的两个值。runtimeConfig: {apiSecret: "apiSecret", //私钥  只能在服务器端使用的私钥public: {//暴露给客户的公钥,公众号内的密钥也会在客户端曝光apiBase: process.env.NUXT_PUBLIC_API_BASE || "/api",},},
​// 将直接传递给 Vite 的配置 有关详细信息，请参阅https://vitejs.dev/config 。请注意，并非所有 vite 选项都在 Nuxt 中受支持。vite: {css: {//全局样式导入preprocessorOptions: {scss: {additionalData: '@use "@/assets/style/colors.scss" as *;',},},},},
​app: {//全局应用配置baseURL: "", //基本urlbuildAssetsDir: "/_nuxt/", //默认： "/_nuxt/"构建站点资产的文件夹名称，相对于baseURL（或cdnURL如果已设置）。keepalive: false, //页面之间 KeepAlive 配置,单个页面上可配置definePageMeta覆盖head: {//在每个页面上设置默认配置<head>。meta: [{name: "viewport",content: "width=device-width, initial-scale=1",},{charset: "utf-8",},],link: [],style: [],script: [],noscript: [],},rootId: "root", //自定义nuxt根元素idrootTag: "div", //自定义nuxt根元素标签 默认 divlayoutTransition: false, //是否开启布局切换过渡动画pageTransition: { name: "page", mode: "out-in" }, //页面过渡动画},appConfig: {}, //额外的应用程序配置 对于编程使用和类型支持，您可以直接提供带有此选项的应用程序配置。它将app.config作为默认值与文件合并build: {//构建配置analyze: false, //Nuxt包解析 用于webpack-bundle-analyzer可视化您的捆绑包以及优化 默认falsetemplates: [//提供自己的模板，这些模板将根据 Nuxt 配置进行渲染// {//   src: "~/modules/support/plugin.js", // 可以是相对路径也可以是绝对路径//   dst: "support.js", // `dst` 是相对于.nuxt 目录//   options: {//     live_chat: false,//选项作为`options`键提供给模板。//   },// },],transpile: [], //Babel 转译特定的依赖},buildDir: ".nuxt", //放置构建的 Nuxt 文件的目录 默认/<rootDir>/.nuxtcomponents: {//配置 Nuxt components 组件自动注册,配置的目录中的任何组件都可以在整个页面、布局（和其他组件）中使用，而无需显式导入它们。dirs: [{path: "~/components/global",global: true,},"~/components",],},css: [//定义要全局设置的 CSS 文件/模块/库（包含在每个页面中）。// "bulma",//直接加载一个Node.js模块（这里是一个Sass文件）。// "@/assets/css/main.css",//项目中的css文件//"@/assets/style/index.scss", //项目中的scss文件],debug: false, //设置为true开启调试模式  在服务器上打印出hook名称和时间，并在浏览器中记录hook参数
​devServer: {//开发服务器host: "", //默认值:localhosthttps: false, //是否开启httpsport: 3000, //监听端口 默认"3000"url: "http://localhost:3000", //监听url},devServerHandlers: [], //Nitro 仅开发服务器处理程序。具体参阅： https: //nitro.unjs.io/guide/introduction/routingdir: {//自定义Nuxt使用的目录结构，除非需要，否则最好坚持使用默认值。assets: "assets", //静态资源目录 默认： "assets"layouts: "layouts", //布局目录，其中的每个文件都会自动注册为 Nuxt 布局。 默认： "layouts"middleware: "middleware", //中间件目录，其中的每个文件都会自动注册为Nuxt中间件。默认： "middleware"pages: "pages", //将被处理以自动生成应用程序页面路由的目录。 默认： "pages"plugins: "plugins", // plugins 目录，其中的每个文件都会自动注册为 Nuxt 插件。默认： "plugins"public: "public", //dist包含静态文件的目录，可通过 Nuxt 服务器直接访问这些文件，并在生成应用程序时将其复制到文件夹中。 默认： "public"static: "static", //默认： "public"},experimental: {asyncEntry: false, //设置为 true 以生成 Vue 包的异步入口点（用于模块联合支持）。默认： falsecomponentIslands: false, //支持experimental components和 .island.vue 文件configSchema: false, //配置架构支持crossOriginPrefetch: false, //使用 Speculation Rules API 启用跨源预取。externalVue: true, //外部化vue，@vue/*并vue-router在构建时。 参阅： https: //github.com/nuxt/nuxt/issues/13632inlineSSRStyles: true, //呈现 HTML 时的内联样式（目前仅 vite）noScripts: false, //关闭 Nuxt 脚本和 JS 资源提示的渲染。payloadExtraction: false, //当启用此选项时（默认情况下）生成的页面的有效负载nuxt generate被提取reactivityTransform: false, //启用 Vue 的反应性转换treeshakeClientOnly: true, //Tree shakes 服务器包中仅客户端组件的内容。参阅： https: //github.com/nuxt/framework/pull/5750viteNode: true, //使用 vite-node 进行按需服务器块加载viteServerDynamicImports: true, //将服务器包拆分为多个块并动态导入它们。 参阅： https: //github.com/nuxt/nuxt/issues/14525writeEarlyHints: false, //使用节点服务器时写早期提示。},extends: "", //从多个本地或远程源扩展项目。值应该是指向源目录或相对于当前配置的配置路径的字符串或字符串数••组。您可以使用github:、gitlab:或从远程bitbucket:githttps://存储库进行扩展extensions: [// Nuxt 解析器解析的扩展。".js",".jsx",".mjs",".ts",".tsx",".vue",],generate: {exclude: [], //不再使用此选项。相反，使用nitro.prerender.ignore.routes: [], //要生成的route。如果您使用的是爬虫，这将只是路由生成的起点。这在使用动态路由时通常是必需的。首选使用nitro.prerender.routes. 示例 routes: ['/users/1', '/users/2', '/users/3']},hooks: undefined, //hook 是 Nuxt 事件的侦听器，通常在模块中使用，但也可用于nuxt.configignore: [//可定制ignorePrefix：所有匹配数组内指定的 glob 模式的文件ignore都将在构建中被忽略。"**/*.stories.{js,ts,jsx,tsx}","**/*.{spec,test}.{js,ts,jsx,tsx}","**/*.d.ts",".output","**/-*.*",],ignoreOptions: {//将选项直接传递给node-ignore（Nuxt 使用它来忽略文件）。ignorecase: false,},ignorePrefix: "-", //如果文件名以指定的前缀开头pages/，layouts/则 、middleware/或中的任何文件都将在构建过程中被忽略。store/ignorePrefiximports: {//Nuxt 如何将可组合项自动导入您的应用程序。dirs: [], //一组将自动导入的自定义目录。请注意，此选项不会覆盖默认目录（~/composables、~/utils）global: false,},modules: [//模块是 Nuxt 扩展，可以扩展其核心功能并添加无穷无尽的集成。// '@nuxtjs/axios',//使用软件包// '~/modules/awesome.js',//使用其他项目路径// ['@nuxtjs/google-analytics', { ua: 'X1234567' }],// function () {}//内联定义],modulesDir: [//用于设置路径解析的模块目录（例如，webpack 的resolveLoading,nodeExternals和postcss）"node_modules", //默认值"/Users/daniel/code/nuxt.js/packages/schema/node_modules", //默认值],nitro: {//nitro的配置 参阅https: //nitro.unjs.io/config/},pages: true, //pages/是否在 Nuxt 3 中使用 vue-router 集成。如果你没有提供一个值，如果你的源文件夹中有一个目录，它将被启用。plugins: [//一系列 nuxt 应用程序插件。插件也会从目录中自动注册，除非您需要自定义它们的顺序，否则~/plugins不需要列出这些插件。nuxt.config所有插件都通过它们的 src 路径进行了重复数据删除],postcss: {plugins: {//配置 PostCSS 插件的选项。 参阅：https://postcss.org/autoprefixer: {},cssnano: true,},},rootDir: "", //根目录 这个属性可以被覆盖（比如运行nuxt ./my-app/会设置rootDir为从当前/工作目录的绝对路径./my-app/。一般不需要配置这个选项。默认： "/<rootDir>"routeRules: {}, //应用于匹配服务器路由的全局路由选项 参阅： https: //nitro.unjs.io/config/#routesserverHandlers: [//服务器处理程序。 参阅： https: //nuxt.com/docs/guide/directory-structure/server// { route: '/path/foo/**:name', handler: '~/server/foohandler.ts' }],sourcemap: {//是否生成 sourcemaps。server: true,client: false,},srcDir: "", //定义 Nuxt 应用程序的源目录。如果指定了相对路径，它将相对于rootDir.ssr: true, //是否启用 HTML 呈现 - 动态（在服务器模式下）或在生成时。如果设置为目标false并与目标结合static，生成的页面将只显示一个没有内容的加载屏幕telemetry: true, //是否参与nuxt测试提供使用信息,手动禁用 nuxt telemetry   参阅:https://github.com/nuxt/telemetrytest: false, //您的应用程序是否正在接受单元测试。theme: "", //从本地或远程源扩展项目。值应该是指向源目录或相对于当前配置的配置路径的字符串。您可以使用github:、gitlab:或从远程bitbucket:githttps://存储库进行扩展。typescript: {//Nuxt 的 TypeScript 集成配置。includeWorkspace: false, //在 Nuxt 项目中包含父工作区,主题和模块shim: true, //生成*.vuestrict: true, //是否严格模式tsConfig: "./tsconfig.json", //.nuxt/tsconfig.json可以使用此选项扩展生成的。typeCheck: false, //启用构建时类型检查。 如果设置为 true，这将在开发中进行类型检查。您可以通过将其设置为build. 需要安装typescript并vue-tsc作为开发依赖项。参阅： https: //nuxt.com/docs/guide/concepts/typescript},
​//Vue.js 配置 请参阅：https://vuejs.org/api/application.html#app-config-compileroptionsvue: {},workspaceDir:"",//定义应用程序的工作区目录。 默认： "/<rootDir>" 这通常在 monorepo 设置中使用。Nuxt 将尝试自动检测您的工作区目录，但您可以在此处覆盖它。通常不需要配置此选项。

上面配置项为大部分nuxt默认配置项，下面内容将介绍单个配置。

代理配置

Nuxt3 最新的正式版使用了nitro做为 dev server, 在其官方文档中，有说明如何配置代理:

{devProxy: {'/proxy/test': 'http://localhost:3001','/proxy/example': { target: 'https://example.com', changeOrigin: true }}
}

我们需要将该配置代理的选项放置到 nuxt.config.ts 文件的 nitro 选项中，如下：

export default defineNuxtConfig({// ...other settingserver: false, // 不开启服务端渲染nitro: {devProxy: {"/api": {target: "http://localhost:3001", // 这里是接口地址changeOrigin: true,prependPath: true,},},},
});

该方式针对服务端渲染的场景也能生效，但是仅会针对发生在客户端测的请求进行代理。比如设置了server: false或者因为一些交互行为而触发的网络请求。

const { data: userinfo } = await useFetch("/api/user", {server: false,
});

配置别名

export default defineNuxtConfig({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", import.meta.url)),},)}

页面中通过别名访问资源：

<template><div><img src="~/images/unnamed.webp" /></div>
</template>

配置全局样式Style

定义要全局设置的 CSS 文件/模块/库（包含在每个页面中，全局生效，确保css资源路径存在或文件中存在样式否则会警告或报错。

export default defineNuxtConfig({css: [// "bulma",//直接加载一个Node.js模块（这里是一个Sass文件）。// "@/assets/css/main.css",//项目中的css文件"@/assets/style/index.scss", //项目中的scss文件"@/assets/style/common.scss","@/assets/style/layout.scss",],)}

使用开发调试工具Devtools

Nuxt DevTools 需要Nuxt v3.1.0 或更高版本。 安装：npx nuxi@latest devtools enable

npx nuxi@latest devtools enable

Nuxt DevTools 当前作为模块提供（将来可能会更改）。如果您愿意，您也可以在本地安装它，这将为您的所有团队成员激活。

npm i -D @nuxt/devtools
export default defineNuxtConfig({devtools: {enabled: true,//启用devtoolsvscode: {},//VS代码服务器选项},modules: ['@nuxt/devtools',//Nuxt DevTools 当前作为模块提供（将来可能会更改）。如果您愿意，您也可以在本地安装它，这将为您的所有团队成员激活],)}

此时运行可以看到页面中会出现devtools图标，说明配置成功：

更多细节请参考：官网

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/29602.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java线程池基本概念

Java线程池基本概念

全局和局部线程池 全局线程池 在Spring框架中&#xff0c;全局线程池如ThreadPoolTaskExecutor通常是作为Spring Bean存在的&#xff0c;它们的生命周期由Spring容器管理。当Spring容器关闭时&#xff0c;这些线程池也会被适当地清理和关闭。因此&#xff0c;开发者通常不需要手…
阅读更多...
DDD架构和微服务初步实现

DDD架构和微服务初步实现

本次记录的是微服务的初步认识和DDD架构的初步实现和思路&#xff0c;在之前的发布里&#xff0c;对Javaweb进行了一次小总结&#xff0c;还有一些东西&#xff0c;不去详细理解说明了&#xff0c;下面开始我对微服务的理解。 什么是微服务&#xff1f; 在刚刚开始学习的时候…
阅读更多...
Study--Oracle-03-数据库常规操作

Study--Oracle-03-数据库常规操作

一路走来&#xff0c;所有遇到的人&#xff0c;帮助过我的、伤害过我的都是朋友&#xff0c;没有一个是敌人。 一、oracle 版本及主要功能 二、数据安装完成后常用操作SQL 1、检查数据库监听状态 监听的常用命令 启动&#xff1a;[oracleoracle u01]$ lsnrctl stop 停止&am…
阅读更多...
2024信息系统、信号处理与通信技术国际会议（ICISPCT2024)

2024信息系统、信号处理与通信技术国际会议（ICISPCT2024)

2024信息系统、信号处理与通信技术国际会议&#xff08;ICISPCT2024) 会议简介 2024国际信息系统、信号处理与通信技术大会&#xff08;ICISPCT2024&#xff09;将在青岛隆重开幕。本次会议旨在汇聚全球信息系统、信号处理和通信技术领域的专家学者&#xff0c;共同探索行业…
阅读更多...
【记录46】【案例】echarts 柱状图

【记录46】【案例】echarts 柱状图

echarts环境4.1.0 <template><div id"threefour"></div> </template> <script> import * as echarts from "echarts" export default {name:"",components:{},data(){return {}},methods:{getdata(){var myChart…
阅读更多...
《平衡小车控制系统》电子设计大赛校赛感悟

《平衡小车控制系统》电子设计大赛校赛感悟

我们学校举行了一次电子设计大赛选拔赛&#xff0c;虽然我们在测试的时候全部都可以完成&#xff0c;最后考核的时候因为方案选择问题以及各种设计逻辑等原因没能成功晋级&#xff0c;但我能从这次备赛中学到很多东西&#xff0c;遂分享一下&#xff0c;与广大网友交流经验。&a…
阅读更多...
英伟达发布开源模型Nemotron-4 340B

英伟达发布开源模型Nemotron-4 340B

&#x1f680; 英伟达发布开源模型Nemotron-4 340B 摘要&#xff1a;英伟达最新发布的开源模型Nemotron-4 340B&#xff0c;可能彻底改变大语言模型&#xff08;LLM&#xff09;训练方式。该模型支持多种自然语言和编程语言&#xff0c;使用9万亿个token训练&#xff0c;高达9…
阅读更多...
Day 26：2288. 价格减免

Day 26：2288. 价格减免

Leetcode 2288. 价格减免 句子 是由若干个单词组成的字符串&#xff0c;单词之间用单个空格分隔&#xff0c;其中每个单词可以包含数字、小写字母、和美元符号 ‘$’ 。如果单词的形式为美元符号后跟着一个非负实数&#xff0c;那么这个单词就表示一个 价格 。 例如 “$100”、…
阅读更多...
Windows系统部署本地SQL_Server指引

Windows系统部署本地SQL_Server指引

Windows系统部署本地SQL_Server指引 此指引文档环境为Windows10系统&#xff0c;部署SQL_Server 2019为例&#xff0c;同系列系统软件安装步骤类似。 一、部署前准备&#xff1b; 下载好相关镜像文件&#xff1b;设备系统启动后&#xff0c;将不必要的软件停用&#xff0c;避…
阅读更多...
【Linux】shell——条件判断test，各种运算符，expr

【Linux】shell——条件判断test，各种运算符，expr

条件判断——test 真——0 假——1 test expression or [ expression ] 整数运算符 字符串运算符 -z 长度是否为0 -n 长度是否不为0 str1 str2 str1 ! str2 补 &&-->逻辑与&#xff0c;前面为真后面才会执行 || -->逻辑或&#xff0c;前面为假后面才…
阅读更多...
VirtFuzz：一款基于VirtIO的Linux内核模糊测试工具

VirtFuzz：一款基于VirtIO的Linux内核模糊测试工具

关于VirtFuzz VirtFuzz是一款功能强大的Linux内核模糊测试工具&#xff0c;该工具使用LibAFL构建&#xff0c;可以利用VirtIO向目标设备的内核子系统提供输入测试用例&#xff0c;广大研究人员可以使用该工具测试Linux内核的安全性。 工具要求 1、Rust&#xff1b; 2、修补的Q…
阅读更多...
线代的学习（矩阵）

线代的学习（矩阵）

1.矩阵的乘法 矩阵实现满足&#xff1a;内标相等 矩阵相乘之后的结果&#xff1a;前行后列 需要注意&#xff1a;1.矩阵的乘法不具有交换律&#xff1a;AB!BA 2.矩阵的乘法满足分配律&#xff1a;A(BC) AB AC 抽象逆矩阵求逆矩阵 方法1.凑定义法、 方法2.长除法 数字型矩阵…
阅读更多...
算法金 | 一个强大的算法模型：t-SNE ！！

算法金 | 一个强大的算法模型：t-SNE ！！

大侠幸会&#xff0c;在下全网同名「算法金」 0 基础转 AI 上岸&#xff0c;多个算法赛 Top 「日更万日&#xff0c;让更多人享受智能乐趣」 t-SNE&#xff08;t-Distributed Stochastic Neighbor Embedding&#xff09;是一种用于降维和数据可视化的非线性算法。它被广泛应用于…
阅读更多...
LeetCode 算法：合并两个有序链表 c++

LeetCode 算法：合并两个有序链表 c++

原题链接&#x1f517;&#xff1a;合并两个有序链表 难度&#xff1a;简单⭐️ 题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;…
阅读更多...
AI智能盒子助力中钢天源设备工厂升级安全防护

AI智能盒子助力中钢天源设备工厂升级安全防护

中钢集团安徽天源科技股份有限公司成立于2002年3月27日,是中央企业中国中钢股份有限公司控股的上市公司&#xff0c;主导产品为永磁铁氧体器件、钕铁硼器件、四氧化三锰、锶铁氧体预烧料及各类磁选机等。 在中钢天源智能化升级过程中&#xff0c;采用并定制开发一系列厂区安全…
阅读更多...
QT day02

QT day02

思维导图 UI界面设计 设置登录界面&#xff0c;输入账号、密码&#xff0c;登录/取消 按钮 使用手动连接&#xff0c;将登录框中的取消按钮使用第二中连接方式&#xff0c;右击转到槽&#xff0c;在该槽函数中&#xff0c;调用关闭函数 将登录按钮使用qt4版本的连接到自定义…
阅读更多...
Python期末复习题库（上）

Python期末复习题库（上）

1. (单选题) Python源程序的扩展名为&#xff08; A &#xff09; A. py B. c C. class D. ph 2. (单选题) 下列&#xff08; A &#xff09;符合可用于注释Python代码。 A. # B. */ C. // D. $ 3. (单选题)下列关于Python 语言的特点的说法中&#xff0c;错误的是&#xf…
阅读更多...
【Linux基础IO】常见的对文件操作的函数、文件描述符fd、访问文件的本质分析

【Linux基础IO】常见的对文件操作的函数、文件描述符fd、访问文件的本质分析

目录 fopen函数 chdir函数 fclose函数 fwrite和fread函数 open函数 umask函数 write函数 read函数 close函数 文件描述符fd 进程访问文件的本质分析 fopen函数 参数mode&#xff1a; w方式打开文件&#xff1a;1、如果被打开文件不存在&#xff0c;系统会在使用fopen函…
阅读更多...
数据结构习题

数据结构习题

第一章 绪论 与数据元素本身的形式、内容、相对位置、个数无关的是数据的 逻辑结构。 第二章 线性表 在一个有127个元素的顺序表中插入一个新元素并保持原来顺序不变&#xff0c;平均要移动的元素个数为 63.5。 n/2 单链表的存储密度 小于1。 创建一个包括n个结点的有序单链…
阅读更多...
零基础入门学用Arduino 第四部分（一）

零基础入门学用Arduino 第四部分（一）

重要的内容写在前面&#xff1a; 该系列是以up主太极创客的零基础入门学用Arduino教程为基础制作的学习笔记。个人把这个教程学完之后&#xff0c;整体感觉是很好的&#xff0c;如果有条件的可以先学习一些相关课程&#xff0c;学起来会更加轻松&#xff0c;相关课程有数字电路…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023