Nuxt3开发与部署我在之前的一篇《Nuxt3入门（上）》中记录了一些Nuxt3入门知识，这里再补充记录一点，包括 la

我在之前的一篇《Nuxt3新手入门速览》中记录了一些Nuxt3入门知识，这里再补充记录一点，包括 layouts 、middleware、plugins，以及两种实测有效的部署时修改服务监听的端口号的方式。原文可参考我的公众号文章《Nuxt3开发与部署》

（ps：如果项目初始化后，目录中没有以上几个文件夹，自己手动创建即可）

Layouts

Nuxt 提供了一个布局框架，用于将常见的 UI 模式提取到可重用的布局中。

设置 layout

使用 <NuxtLayout> 组件，提供 name 属性。

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

使用 definePageMeta 函数:

<script setup lang="ts">
definePageMeta({
  layout: 'custom'
})
</script>

使用 setPageLayout 动态设置：

<script setup lang="ts">
function enableCustomLayout () {
  setPageLayout('custom')
}
definePageMeta({
  layout: false,
});
</script>

Middleware

Nuxt 提供了中间件，用于在导航到特定路由之前运行代码。路由中间件是接收当前路由和下一个路由作为参数的导航守卫。

middleware 可以定义在 middleware 目录下，每个文件都是一个中间件，如果是全局路由，文件名需要增加.global前缀。

也可以在 defineMiddleware 函数中的middleware属性中定义（inline）。

Nuxt 提供了两个全局可用的 helper，可以直接从中间件返回，对路由进行重定向或取消导航。

export default defineNuxtRouteMiddleware((to, from) => {
  // 用于取消路由导航行为
  return abortNavigation();
  return abortNavigation(error);

  // 用于重定向行为
  return navigateTo("/");
  return navigateTo("/", { redirectCode: 301 });
});

Plugins

Nuxt 有一个插件系统，可以在创建 Vue 应用程序时使用 Vue 插件和更多插件。

Nuxt 会自动读取 plugins 根目录下的所有文件，并将它们作为插件导入。

如果是二级目录，则需要通过 nuxt.config.ts 的 plugins 配置来添加插件。

export default defineNuxtConfig({
  plugins: ["~/plugins/bar/baz", "~/plugins/bar/foz"],
});

在 Nuxt3 中，创建插件的方式与 Nuxt2 不同，需要使用defineNuxtPlugin函数。

export default defineNuxtPlugin((nuxtApp) => {
  // Doing something with nuxtApp
});

另外，还支持更高级的 Object Syntax Plugins 对象语法定义插件。

插件引入的顺序是按照字母顺序的编号来定的，因此，可以在插件文件名前增加字母数字，比如：01.foo.js、02.bar.js，这里 01、02 是插件的优先级，数字越小优先级越高。因此02.bar.js可以访问到01.foo.js中的内容。

特别注意：“文件名是按字符串排序的，而不是按数字值排序的。例如，10.myPlugin.ts 将在 2.myOtherPlugin.ts 之前出现。这就是为什么该示例在个位数前加上 0 的原因。”

如果一个插件需要等待另一个插件才能运行，你可以将插件的名称添加到 dependsOn 数组中。

export default defineNuxtPlugin({
  name: "depends-on-my-plugin",
  dependsOn: ["my-plugin"],
  async setup(nuxtApp) {
    // this plugin will wait for the end of `my-plugin`'s execution before it runs
  },
});

开发与部署

修改开发环境端口号

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  devServer: {
    port: 3003,
    host: "0.0.0.0",
  },
});

修改部署环境端口号

方式 1：直接修改 nitro.mjs

找到 .output/server/chunks/nitro/nitro.mjs 文件，找到以下

...
const port = destr(process.env.NITRO_PORT || process.env.PORT) || 3e3;
...

这行代码，这里会从 env 中获取端口，默认为 3000。我们只需要将值固定为需要指定的端口号即可。

方式 2：在 Linux 上通过export注入配置变量

运行命令：

export PORT=3333 && node .output/server/index.mjs

➜  test_nuxt export PORT=3333 &&  node .output/server/index.mjs
Listening on http://[::]:3333

PS：如果是多个变量可以通过空格分割，如下：

export MY_ENV_VAR1=hello MY_ENV_VAR2=world && node cmd.js

其它还有如 dotenv、cross-env，不过针对修改 Nuxt 端口这个场景没必要。