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

news2024/10/5 15:34:48

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: "", //基本url
    buildAssetsDir: "/_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根元素id
    rootTag: "div", //自定义nuxt根元素标签 默认 div
    layoutTransition: false, //是否开启布局切换过渡动画
    pageTransition: { name: "page", mode: "out-in" }, //页面过渡动画
  },
  appConfig: {}, //额外的应用程序配置 对于编程使用和类型支持，您可以直接提供带有此选项的应用程序配置。它将app.config作为默认值与文件合并
  build: {
    //构建配置
    analyze: false, //Nuxt包解析 用于webpack-bundle-analyzer可视化您的捆绑包以及优化 默认false
    templates: [
      //提供自己的模板，这些模板将根据 Nuxt 配置进行渲染
      // {
      //   src: "~/modules/support/plugin.js", // 可以是相对路径也可以是绝对路径
      //   dst: "support.js", // `dst` 是相对于.nuxt 目录
      //   options: {
      //     live_chat: false,//选项作为`options`键提供给模板。
      //   },
      // },
    ],
    transpile: [], //Babel 转译特定的依赖
  },
  buildDir: ".nuxt", //放置构建的 Nuxt 文件的目录 默认/<rootDir>/.nuxt
  components: {
    //配置 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: "", //默认值:localhost
    https: false, //是否开启https
    port: 3000, //监听端口 默认"3000"
    url: "http://localhost:3000", //监听url
  },
  devServerHandlers: [], //Nitro 仅开发服务器处理程序。具体参阅： https: //nitro.unjs.io/guide/introduction/routing
  dir: {
    //自定义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 包的异步入口点（用于模块联合支持）。默认： false
    componentIslands: false, //支持experimental components和 .island.vue 文件
    configSchema: false, //配置架构支持
    crossOriginPrefetch: false, //使用 Speculation Rules API 启用跨源预取。
    externalVue: true, //外部化vue，@vue/*并vue-router在构建时。 参阅： https: //github.com/nuxt/nuxt/issues/13632
    inlineSSRStyles: true, //呈现 HTML 时的内联样式（目前仅 vite）
    noScripts: false, //关闭 Nuxt 脚本和 JS 资源提示的渲染。
    payloadExtraction: false, //当启用此选项时（默认情况下）生成的页面的有效负载nuxt generate被提取
    reactivityTransform: false, //启用 Vue 的反应性转换
    treeshakeClientOnly: true, //Tree shakes 服务器包中仅客户端组件的内容。参阅： https: //github.com/nuxt/framework/pull/5750
    viteNode: true, //使用 vite-node 进行按需服务器块加载
    viteServerDynamicImports: true, //将服务器包拆分为多个块并动态导入它们。 参阅： https: //github.com/nuxt/nuxt/issues/14525
    writeEarlyHints: 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.config
  ignore: [
    //可定制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/ignorePrefix
  imports: {
    //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/#routes
  serverHandlers: [
    //服务器处理程序。 参阅： 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/telemetry
  test: false, //您的应用程序是否正在接受单元测试。
  theme: "", //从本地或远程源扩展项目。值应该是指向源目录或相对于当前配置的配置路径的字符串。您可以使用github:、gitlab:或从远程bitbucket:githttps://存储库进行扩展。
  typescript: {
    //Nuxt 的 TypeScript 集成配置。
    includeWorkspace: false, //在 Nuxt 项目中包含父工作区,主题和模块
    shim: true, //生成*.vue
    strict: 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-compileroptions
  vue: {},
  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 setting
  server: 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,//启用devtools
    vscode: {},//VS代码服务器选项
  },
  modules: [
    '@nuxt/devtools',//Nuxt DevTools 当前作为模块提供（将来可能会更改）。如果您愿意，您也可以在本地安装它，这将为您的所有团队成员激活
  ],
 )}

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

更多细节请参考：官网

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

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

相关文章

LeetCode | 344.反转字符串

LeetCode | 344.反转字符串

设置头尾两个指针&#xff0c;依靠中间变量temp交换头尾指针所指元素&#xff0c;头指针后移&#xff0c;尾指针前移&#xff0c;直到头尾指针重合或者头指针在尾指针后面一个元素 class Solution(object):def reverseString(self, s):""":type s: List[str]:r…
阅读更多...
大数据量列表渲染优化：前端实战经验让性能飙升50%，页面速度提升95%

大数据量列表渲染优化：前端实战经验让性能飙升50%，页面速度提升95%

引言&#xff1a;在处理大规模数据集渲染时&#xff0c;前端性能常常面临巨大的挑战。本文将探讨 react-virtualized-list 库如何通过虚拟化技术和 Intersection Observer&#xff0c;实现前端渲染性能飙升 50% 的突破&#xff0c;页面渲染速度提升 95% &#xff01;&#x1f5…
阅读更多...
智能化软件开发微访谈·第三十一期 代码大模型训练、微调与增强

智能化软件开发微访谈·第三十一期 代码大模型训练、微调与增强

CodeWisdom “智能化软件开发沙龙是由CodeWisdom团队组织的围绕智能化软件开发、数据驱动的软件开发质量与效能分析、云原生与智能化运维等相关话题开展的线上沙龙&#xff0c;通过微信群访谈交流等线上交流方式将学术界与工业界专家学者汇聚起来&#xff0c;共同分享前沿研究进…
阅读更多...
【Linux】使用 iptables 验证访问HDFS 所使用到的端口

【Linux】使用 iptables 验证访问HDFS 所使用到的端口

目录 ​编辑 一、实操背景 二、iptables 简介 三、模拟操作 一、实操背景 背景&#xff1a; 在客户有外网的服务器需要访问内网大数据集群HDFS&#xff0c;使用iptable模拟测试需要开放的端口。 二、iptables 简介 具体介绍看文章&#xff1a; 【Linux】Iptables 详解与实战…
阅读更多...
性能工具之 JMeter 常用组件介绍（七）

性能工具之 JMeter 常用组件介绍（七）

文章目录 一、后置处理器1、Regular Expression Extractor(正则表达式提取器)2、JSON Extractor(JSON表达式提取器)3、Regular Expression Extractor(正则表达式提取器) 二、小结 一、后置处理器 从上面可以看出后置处理可以插件挺多&#xff0c;在我工作生涯中常用的就是几个组…
阅读更多...
【探索Linux命令行】从基础指令到高级管道操作的介绍与实践

【探索Linux命令行】从基础指令到高级管道操作的介绍与实践

目录 man 指令&#xff08;说明&#xff09; 介绍 cp 指令&#xff08;复制&#xff09; ​编辑 mv 指令&#xff08;移动&#xff09; ​编辑 cat 指令&#xff08;类似cout&#xff09; less&#xff08;查找&#xff09; head & tail&#xff08;打印&#xff…
阅读更多...
基于jeecgboot-vue3的Flowable流程-流程表单显示控制

基于jeecgboot-vue3的Flowable流程-流程表单显示控制

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 这个部分主要讲流程起始表单的显示控制&#xff0c;因为开始的时候可以进行输入处理&#xff0c;在流程过程中只能只读状态&#xff0c;当然返回到发起人节点也可以进行编辑提交 1、开始发…
阅读更多...
Spring配置那些事

Spring配置那些事

一、引言 配置是一个项目中不那么起眼&#xff0c;但却有非常重要的东西。在工程项目中&#xff0c;我们一般会将可修改、易变、不确定的值作为配置项&#xff0c;在配置文件/配置中心中设置。 比方说&#xff0c;不同环境有不同的数据库地址、不同的线程池大小等&#xff0c…
阅读更多...
【NOI题解】1656. 是两位的偶数吗1658. 游乐设施1659. 是否含有数字5 1660. 今天要上课吗1661. 宇航员选拔

【NOI题解】1656. 是两位的偶数吗1658. 游乐设施1659. 是否含有数字5 1660. 今天要上课吗1661. 宇航员选拔

文章目录 一、前言二、问题问题&#xff1a;1656. 是两位的偶数吗问题&#xff1a;1658. 游乐设施问题&#xff1a;1659. 是否含有数字5问题&#xff1a;1660. 今天要上课吗问题&#xff1a;1661. 宇航员选拔 三、感谢 一、前言 本章节主要对关于分支结构的中需要进行逻辑运算…
阅读更多...
OpenCV目标识别

OpenCV目标识别

一 图像轮廓 具有相同颜色或强度的连续点的曲线。 图像轮廓的作用 可以用于图像分析 物体的识别与检测 注意 为了检测的准确性&#xff0c;需要先对图像进行二值化或Canny操作。 画轮廓时会修改输入的图像。 轮廓查找的API findContours(img,mode,ApproximationMode,...)…
阅读更多...
GUI Guider（V1.7.2） 设计UI在嵌入式系统上的应用（N32G45XVL-STB）

GUI Guider（V1.7.2） 设计UI在嵌入式系统上的应用（N32G45XVL-STB）

目录 概述 1 使用GUI Guider 设计UI 1.1 创建页面 1.2 页面切换事件实现 1.3 生成代码和仿真 1.3.1 生成和编译代码 1.3.2 仿真UI 2 GUI Guider生成的代码结构 2.1 代码结构介绍 2.2 Project目录下的文件 3 板卡上移植UI 3.1 加载代码至工程目录 3.2 主函数中调…
阅读更多...
新旧torch中傅里叶变换实现（fft）

新旧torch中傅里叶变换实现（fft）

由泰勒级数我们知道&#xff0c;一个函数可以被分解成无穷个幂函数叠加的形式&#xff0c;于是同样地&#xff0c;一个周期函数也可以被分解成多个周期函数叠加&#xff0c;于是自然而然地&#xff0c;三角函数符合这个需求&#xff0c;由傅里叶级数我们可以将周期函数分解成无…
阅读更多...
【车载音视频AI电脑】铁路视频监控系统解决方案

【车载音视频AI电脑】铁路视频监控系统解决方案

方案简介 铁路视频监控系统解决方案针对铁路行业安全运营保障需求&#xff0c;根据中国铁路总公司的技术规范要求&#xff0c;基于铁路系统的IP网络&#xff0c;采用先进的视频监控技术&#xff0c;构建一套完备的数字化、智能化、分布式铁路综合视频监控系统&#xff0c;实现视…
阅读更多...
第二证券A股重要变化！今起实施

第二证券A股重要变化！今起实施

A股系列重要指数迎来样本股调整&#xff01; 此前&#xff0c;深交所及其全资子公司深证信息发布公告&#xff0c;将对深证成指、创业板指、深证100&#xff08;以下统称“深市中心指数”&#xff09;施行样本股定时调整。此次调整于6月17日&#xff08;今日&#xff09;正式施…
阅读更多...
关于电脑文件的规划思考

关于电脑文件的规划思考

概述 设置C、D、E、F 四个盘 C盘&#xff1a;系统数据使用&#xff0c;操作系统、其他软件需要用到的系统性资源 D盘&#xff1a;应用软件区 的使用&#xff0c;数据库、navacat、idea、visual studio、浏览器、向日葵、虚拟机…… E盘&#xff1a;工作区&#xff1a;公司资料…
阅读更多...
如何移植libwebsockets

如何移植libwebsockets

libwebsockets是一个高性能的开源C语言库&#xff0c;专为实现WebSocket协议及相关的HTTP协议而设计。它不仅使开发者能够在客户端与服务器端轻松构建WebSocket连接&#xff0c;还可以用作标准HTTP服务器。WebSocket是一种在单个TCP连接上进行全双工通信的协议&#xff0c;可以…
阅读更多...
APS为什么是业务、开发、数据和算法的结合体

APS为什么是业务、开发、数据和算法的结合体

获取更多资讯，赶快关注上面的公众号吧！ 文章目录 一 引言二 业务是灵魂2.1 生产类型2.2 生产模式2.3 生产约束三 开发是支撑3.1 开发语言3.2 技术架构3.3 内存计算3.4 系统集成3.5 系统交互四 数据是基础五 算法是核心5.1 问题建模5.2 算法建模总结APS系统的实施是一个类似阶…
阅读更多...
技术心得总结：a 标签实现新标签页打开功能

技术心得总结：a 标签实现新标签页打开功能

最近&#xff0c;有用户提出希望在点击菜单项时&#xff0c;能够在新标签页中打开对应的链接功能。这类似于我们常用的右键菜单中的“在新标签页打开链接”功能。经过对需求的分析和代码的查看&#xff0c;我们找到了实现这一功能的方法。 原始实现 最初的跳转实现是通过用户触…
阅读更多...
three.js 基础01

three.js 基础01

1.场景创建 Scene() 2.常用形状集几何体「Geometry」[可设置长宽高等内容&#xff0c;如&#xff1a;new THREE.BoxGeometry(...)] 长方体 BoxGeometry圆柱体 CylinderGeometry 球体SphereGeometry圆锥体ConeGeometry矩形平面 PlaneGeometry 圆面体 CircleGeo…
阅读更多...
Linux中文件查找相关命令比较

Linux中文件查找相关命令比较

Linux中与文件定位的命令有find、locate、whereis、which&#xff0c;type。 一、find find命令最强&#xff0c;能搜索各种场景下的文件&#xff0c;需要配合相关参数&#xff0c;搜索速度慢。在文件系统中递归查找文件。 find /path/to/search -name "filename"…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023