# 一、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 处理的上下文功能
      更新于 : 7/8/2024, 10:21:14 AM