nuxt基础 | 任先生的笔记库

# 一、nuxt 配置

官方介绍：https://nuxt.com/docs/getting-started/configuration

# 1、Runtime Config

先看一下 nuxt.config.ts

参考：Runtime Config (opens new window)

提示

这些值应该在 nuxt.config 中定义，并且可以使用环境变量（.env 中配置）覆盖

nuxt.config.ts

在客户端，只有键可用 runtimeConfig.public ，并且对象既是 writable 的，又是 reactive 的。

在服务器端，整个运行时配置在服务器端可用，但它是 read-only 的，以避免上下文共享。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },

  // 运行时配置的变量
  runtimeConfig: {
    // server端的变量
    apiSecret: 'api_secret_token', // 可以被.env文件中 NUXT_API_SECRET 环境变量覆盖

    // 公共的变量
    public: {
      baseURL: '/dev_api'
    }
  }
})

app.vue

<script setup lang="ts">
const config = useRuntimeConfig()

// 比较
// console.log(config)

if (process.client) {
  // 浏览器控制台查看
  console.log('API base:', config.public.baseURL)
}

if (process.server) {
  // vscode控制台查看
  console.log('API base:', config.public.baseURL)
  console.log('API secret:', config.apiSecret)
}
</script>

<template>
  <div>
    <h2>App</h2>
  </div>
</template>

# 2、Env

先看一下.env

参考：.env (opens new window)

Nuxt CLI 在开发模式下和运行时 nuxi build 内置了 dotenv (opens new window) 支持 nuxi generate 。

根目录中有一个 .env 文件，它将在开发、构建和生成时自动加载。在那里设置的任何环境变量都可以在您的 nuxt.config 文件和模块中访问。

简单的说就是：.env 中配置的环境变量可以覆盖 nuxt.config.ts 中配置的环境变量

提示

Nuxi CLI 内置了对在开发、构建和生成 .env 中读取文件的支持。但是，当您运行构建的服务器时，您的 .env 文件将不会被读取。

在开发模式下更新 .env 时，Nuxt 实例会自动重新启动以将新值应用于 process.env

.env

# PORT 会被添加到 process.env中
PORT=5051

# 会覆盖nuxt.config.ts中的 apiSecret
NUXT_API_SECRET=xxxxxxxxxxx

# 3、App Config

先看一下app.config.ts

参考：app.config.ts (opens new window)

文件 app.config.ts 位于源目录（默认情况下是项目的根目录）中，用于公开可在生成时确定的公共变量。与该 runtimeConfig 选项相反，不能使用环境变量覆盖这些变量。

app.config.ts

也可以通过 nuxt.config.ts 中的appConfig (opens new window)选项

// app应用的变量
export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000'
    }
  }
})

app.vue

const appConfig = useAppConfig()

// client、server都可用
// console.log(appConfig)

onMounted(() => {
  console.log('title:', appConfig.title)

  document.title = appConfig.title
})

# 4、SEO and Meta

通过强大的头部配置、可组合项和组件来改善 Nuxt 应用程序的 SEO。

并且开箱即用，Nuxt 提供了合理的默认值

更多内容请阅读：SEO and Meta (opens new window)

更多用法，可以查看 API 文档进行尝试：useHead (opens new window)、useSeoMeta (opens new window)

# 5、Styling 样式

具体可以阅读：Styling (opens new window)

nuxt.config.ts

export default defineNuxtConfig({
  css: ['~/assets/css/main.css', '~/assets/scss/main.scss'],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/_colors.scss" as *;' // scss 的 Partial 文件
        }
      }
    }
  }
})

page/index.vue

<style scoped lang="scss">
/* 使用scss变量 */
@import url('~/assets/css/_variable.scss');

button {
  background: $primary;
}
</style>

# 6、其他

提示

具体可以阅读：Nuxt Configuration (opens new window)

# 二、Nuxt 路由

# 1、渲染模式

如果我们不想使用 SSR 了，也可以切换为 SPA 模式。甚至我们还可以使用混合渲染的方式进行开发。

nuxt.config.ts

官方描述：Custom Routing (opens new window)、Environment override (opens new window)、Hybrid Rendering (opens new window)、nitro 与 routeRules (opens new window)

# 3、路由规则

在 Nuxt 中，如果符合约定条件，是不需要手动编写 routeRules 的。

详细内容可以查看：Views (opens new window)、pages (opens new window)

如果项目非常复杂，有必要手动编写时，可以阅读：Custom Routing (opens new window)

# 4、路由中间件

详细内容可以查看：special-metadata (opens new window)、Routing (opens new window)、middleware (opens new window)

middleware/auth.ts

export default defineNuxtRouteMiddleware((to, from) {

  // Custom inline middleware

})

page/demo.vue

<script setup lang="ts">
definePageMeta({
  middleware: ['auth']
  // or middleware: 'auth'
})
</script>

# 5、错误处理

详细内容可以查看：route validate (opens new window)、Error Page (opens new window)

pages/posts/[id].vue

<script setup lang="ts">
definePageMeta({
  validate: async (route) => {
    // Check if the id is made up of digits
    // return /^\d+$/.test(route.params.id)

    return {
      statusCode: 401,
      statusMessage: 'validata router error'
    }
  }
})
</script>

error.vue

<script setup lang="ts">
const props = defineProps({
  error: Object
})

const handleError = () => clearError({ redirect: '/' })
</script>

<template>
  <div>
    <h2>{{ error.statusCode }}</h2>
    <button @click="handleError">Clear errors</button>
  </div>
</template>

# 三、Nuxt 设计思想

Nuxt 集成了 Typescript，拥有完美的智能提示，将 Typescript 的优势发挥到了极致，只能说是真的香！！

更重要的是 Nuxt 中的默认的规范（文件分类及存放位置）是非常有效且值得我们学习的。

page/component、public/asset

components 文件结构的读取方式，类似于 vuepress 中的 component 的读取方式
middleware 的使用类似于 koa 中的 middleware（包括其中的路由 error 错误处理）
自动导入功能类似于 element-plus 中提到的通过插件的方式实现按需自动导入（结合 vben 的那个插件）
Commands 命令快速生成文件类似于 hexo 命令快速生成文件的方式
layouts 布局类似于几乎所有组件库、所有的静态网站（hexo、vuepress）都有的布局功能
Nuxt 插件开发类似与 Pinia 插件、Redux 共享、koa 的 error 处理的上下文功能

← nuxt邂逅 nuxt进阶 →