Nuxt 菜鸟入门学习笔记二：配置-Javascript前端- WEB程序开发笔记

Nuxt 菜鸟入门学习笔记二：配置

原创
作者：phpEcho
发布时间：2023-07-22 10:36
标签： Nuxt SSR 服务端渲染
浏览量：573

本文内容由 Nuxt 官网翻译而来，主要介绍了 Nuxt 支持的配置方式。

[TOC]

![Nuxt](https://cnd.51blog.xyz/images/nuxt-logo.png)
Nuxt 官网地址：[https://nuxt.com/](https://nuxt.com/)

默认情况下，Nuxt 的配置涵盖了大多数用例。nuxt.config.ts 文件可以覆盖或扩展默认配置。

# Nuxt 配置

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

最小配置文件导出`defineNuxtConfig`函数，该函数包含一个包含您的配置的对象。`defineNuxtConfig`辅助函数无需导入即可全局使用。

```typescript
export default defineNuxtConfig({
  // My Nuxt config
});
```

该文件经常在文档中提及，例如用于添加自定义脚本、注册模块或更改渲染模式。

## 环境覆盖

您可以在 nuxt.config 中配置完全类型化的环境重载。

```typescript
// nuxt.config.ts

export default defineNuxtConfig({
  $production: {
    routeRules: {
      "/**": { isr: true },
    },
  },
  $development: {
    //
  },
});
```

## 环境变量和私有令牌

`runtimeConfig` API 将环境变量等值公开（暴露）给应用程序的其他部分。默认情况下，这些键值只在服务器端可用。`runtimeConfig.public`中的键值在客户端也是可用的。

这些值应在`nuxt.config`中定义，并可使用环境变量覆盖。

```typescript
// nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available server-side
    // 最外层的key只能使用在服务端
    apiSecret: "123",
    // 在public下的key在服务端和客户端都可以使用
    public: {
      apiBase: "/api",
    },
  },
});
```

在环境变量`.env`文件中进行覆盖：

```
// .env

# 将覆盖nuxt.config中的apiSecret
NUXT_API_SECRET=api_secret_token
```

这些变量将通过`useRuntimeConfig`组合式函数暴露给应用程序的其他部分。

```typescript
// pages/index.vue

# 应用配置

`app.config.ts`文件位于源代码目录（默认情况下位于项目根目录）中，用于公开可在构建时确定的公有变量。与 runtimeConfig 选项相反，这些变量不能通过环境变量覆盖。

一个最小的配置文件导出`defineAppConfig`函数，该函数包含一个包含配置的对象。`defineAppConfig`辅助函数无需导入即可全局使用。

```typescript
// app.config.ts

export default defineAppConfig({
  title: "Hello Nuxt",
  theme: {
    dark: true,
    colors: {
      primary: "#ff0000",
    },
  },
});
```

这些变量通过使用 useAppConfig 可组合变量暴露给应用程序的其他部分。

```typescript
// pages/index.vue

# runtimeConfig 与 app.config

如上所述，`runtimeConfig`和`app.config`都用于向应用程序的其他部分公开变量。要确定是使用其中一个还是另一个，这里有一些指导原则：

- `runtimeConfig`：需要在构建后使用环境变量指定的私有或公用令牌。
- `app.config`：在构建时确定的公共令牌、网站配置（如主题变体、标题和任何不敏感的项目配置）。

| **特性**       | `**runtimeConfig**` | `**app.config**` |
| -------------- | ------------------- | ---------------- |
| 客户端         | Hydrated            | Bundled          |
| 环境变量       | Yes                 | No               |
| Reactive       | Yes                 | Yes              |
| 类型支持       | 部分                | 全部             |
| 每个请求的配置 | No                  | Yes              |
| 模块热更新     | No                  | Yes              |
| 非原始 JS 类型 | No                  | Yes              |

# 外部配置文件

Nuxt 使用`nuxt.config.ts`文件作为配置的唯一信任来源，并跳过读取外部配置文件。在构建项目的过程中，您可能需要配置这些配置。下表强调了常见的配置，以及在适用的情况下，如何使用 Nuxt 配置它们。

| 配置项                             | 原始配置文件          | Nuxt 中如何配置                                                                                 |
| ---------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------- |
| [Nitro](https://nitro.unjs.io/)    | ~~nitro.config.ts~~   | Use [nitro](https://nuxt.com/docs/api/configuration/nuxt-config#nitro) key in nuxt.config       |
| [PostCSS](https://postcss.org/)    | ~~postcss.config.js~~ | Use [postcss](https://nuxt.com/docs/api/configuration/nuxt-config#postcss) key in nuxt.config   |
| [Vite](https://vitejs.dev/)        | ~~vite.config.ts~~    | Use [vite](https://nuxt.com/docs/api/configuration/nuxt-config#vite) key in nuxt.config         |
| [webpack](https://webpack.js.org/) | ~~vite.config.ts~~    | Use [webpack](https://nuxt.com/docs/api/configuration/nuxt-config#webpack-1) key in nuxt.config |

以下是其他常见配置文件的列表：

| 配置项                                        | 配置文件           | 如何配置                                                                              |
| --------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------- |
| [TypeScript](https://www.typescriptlang.org/) | tsconfig.json      | [查看详情](https://nuxt.com/docs/guide/concepts/typescript#nuxttsconfigjson)          |
| [ESLint](https://eslint.org/)                 | .eslintrc.js       | [查看详情](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) |
| [Prettier](https://prettier.io/)              | .prettierrc.json   | [查看详情](https://prettier.io/docs/en/configuration.html)                            |
| [Stylelint](https://stylelint.io/)            | .stylelintrc.json  | [查看详情](https://stylelint.io/user-guide/configure)                                 |
| [TailwindCSS](https://tailwindcss.com/)       | tailwind.config.js | [查看详情](https://tailwindcss.nuxtjs.org/tailwind/config/)                           |
| [Vitest](https://vitest.dev/)                 | vitest.config.ts   | [查看详情](https://vitest.dev/config/)                                                |

# Vue 配置支持

## 配置 Vite

如果需要将选项传递给 @vitejs/plugin-vue 或 @vitejs/plugin-vue-jsx，可以在 nuxt.config 文件中完成。

- vite.vue 用于 @vitejs/plugin-vue。[点此查看可用选项](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue)。
- vite.vueJsx 用于 @vitejs/插件-vue-jsx。[点此查看可用选项](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx)。

```typescript
// nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    vue: {
      customElement: true,
    },
    vueJsx: {
      mergeProps: true,
    },
  },
});
```

## 配置 webpack

如果您使用 webpack 并需要配置 vue-loader，您可以使用 nuxt.config 文件中的`webpack.loaders.vue` key 来配置。[点击这里查看定义了的可用选项](https://github.com/vuejs/vue-loader/blob/main/src/index.ts#L32-L62)。

```typescript
// nuxt.config.ts

export default defineNuxtConfig({
  webpack: {
    loaders: {
      vue: {
        hotReload: true,
      },
    },
  },
});
```

## 启用试验性 Vue 功能

您可能需要启用 Vue 中的实验特性，如 defineModel 或 propsDestructure。Nuxt 在 nuxt.config.ts 中提供了一种简便的方法，无论您使用哪种构建器：

```typescript
// nuxt.config.ts

export default defineNuxtConfig({
  vue: {
    defineModel: true,
    propsDestructure: true,
  },
});
```

本文只是简单介绍了如何对 Nuxt 进行配置，具体配置需要我们结合实际场景和需求进行实践。

WEB程序开发笔记

Nuxt 菜鸟入门学习笔记二：配置

文章归档

推荐文章

热门标签

友情链接