Nuxt3项目工程化、环境变量、SEO配置

奇迹行者_z
1,447 阅读8分钟

前言

本文围绕Nuxt3.0做项目详细配置相关介绍。项目搭建可移步一篇你值得看的Nuxt3应用指南，主要针对Nuxt工程化的配置、环境变量配置、seo相关配置。

1.项目多端适配

使用Nuxt搭建主要以官网等有seo需求的项目、通常官网项目最基本分为移动端和pc端两类，一般情况下很多官网会分为移动端和pc端两个项目，分别部署。这样做的好处是不需要做很多兼容、针对不同端的迭代不同步也可以做到独立发版，缺点也显而易见：两套系统需要两套域名、两次项目搭建以及其他重复性的工作量。如果集成两端到一个项目中虽然需要我们做一定的配置、但是好处是可以将复用的思想发挥的很好，一套系统无论从研发、测试以及部署上线等各个方面来说都是优于分开开发的。

实现思路

判断当前运行环境是pc还是移动端，通过替换路由前缀的方式实现。我们都知道Nuxt的路由是基于文件目录自动生成的，本质也是使用vue-router去实现的路由功能，Nuxt也支持我们自定义路由去实现一些功能。

1.1 判断运行环境

在composables文件夹下新建useDeviceType.ts

export const useDeviceType = () => {
  let UA: string;
  if (import.meta.client) {
    // 如果是在客户端执行，则通过 navigator 获取 user-agent
    UA = navigator.userAgent;
  } else {
    // 如果是在服务端执行，则通过请求头获取 user-agent
    UA = useRequestHeader('user-agent') as string;
  }
  const type = ref<'mobile' | 'pc'>('pc');
  console.log(UA);
  // 通过 UA 来判断设备类型是 pc 还是 mobile
  if (/(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(UA)) {
    type.value = 'mobile';
  } else {
    type.value = 'pc';
  }
  return type;
};

1.2路由配置

新建router.option.ts,文件我放在了app文件夹下。

import type { RouterConfig } from 'nuxt/schema';
// 导出路由配置项
const customRouterConfig: RouterConfig = {
  routes: (_routes) => {
    // 如果是移动端访问，则给移动端页面删除路由前缀 /mobile ，给PC端页面添加路由前缀 /pc
    // 如果是 PC 端访问，则给 PC 端页面删除路由前缀 /pc ，给移动端页面添加路由前缀 /mobile

    // 当前设备的类型
    const targetType = useDeviceType().value;
    // 不是当前设备类型的另一个类型
    const notTargetType = targetType === 'mobile' ? 'pc' : 'mobile';
    // 找到匹配当前设备的所有页面路由
    let targetRoutes = _routes.filter((item) =>
      (item.name as string).startsWith(targetType),
    );
    targetRoutes = targetRoutes.map((item) => {
      // 将路由前缀删除
      item.path =
        item.path.replace(`/${targetType}`, '') === ''
          ? '/'
          : item.path.replace(`/${targetType}`, '');
      console.log(item.path);
      //重定向/到对应的页面
      if (item.path === '/' && item.name === 'pc') {
        item.redirect = '/home';
      }
      if (item.path === '/' && item.name === 'mobile') {
        item.redirect = '/mobileHome';
      }
      // 如果 PC 端、移动端 分别使用的是两套 layout，可以使用下面这段代码去指定布局
      // if (!item.meta?.layout) {
      //   item.meta = {
      //     ...item.meta,
      //     layout: `/${targetType}` === '/mobile' ? '移动端布局名' : 'PC 端布局名',
      //   }
      // }
      return item;
    });
    //匹配所有路由

    // 找到不匹配当前设备的所有页面路由
    let notTargetRoutes = _routes.filter((item) =>
      (item.name as string).startsWith(notTargetType),
    );
    notTargetRoutes = notTargetRoutes.map((item) => {
      // 将路由前缀添加上
      if (!item.path.startsWith(`/${notTargetType}`))
        item.path = `/${notTargetType}${item.path}`;
      return item;
    });
    const costomRoutes = [...targetRoutes, ...notTargetRoutes];
    //这里是添加自定义的404页面
    // costomRoutes.push({
    //   path: '/:path(.*)*',
    //   name: '404',
    //   component: () => import('@/pages/pc/404.vue'),
    // });
    return costomRoutes;
  },
};

export default customRouterConfig;

可以看到思路就是定义一个RouterConfig类型的customRouterConfig对象，通过useDeviceType()判断当前环境： 如果是移动端访问，则给移动端页面删除路由前缀 /mobile ，给PC端页面添加路由前缀 /pc； 如果是 PC 端访问，则给 PC 端页面删除路由前缀 /pc ，给移动端页面添加路由前缀 /mobile。 通过替换或者添加路由前缀后导出所有路由

1.3 nuxt.config.ts配置

在nuxt.config.ts中导入customRouterConfig，

 router: {
    options: {
      hashMode: false,
      ...customRouterConfig,
    }
  },

一般需要seo的话设置hashMode为false，这会启用history路由模式。

当然了，pc和移动端的页面文件建议分开两个文件夹去放置

image.png 注意一点，需要再两个文件夹中添加index.vue,如果不添加index.vue的话会导致输入/根路由，重定向的配置也就不会生效，就会出现404的问题。 到这里就可以去浏览器输入http://localhost:3000试一试效果了，切换移动端和pc端点击这里

image.png，切换之后路由并不会自动替换，需要刷新重新获取到运行环境后输出http://localhost:3000就能切换到对应端的路由了。

2 配置环境变量

在 Nuxt 3 中,有几种方式可以配置环境变量:

  1. 使用 .env 文件:

    • 在项目根目录创建一个 .env 文件,并在其中定义环境变量。
    • 例如: API_KEY=your_api_key
    • 在代码中使用 process.env.API_KEY 访问这个环境变量。

  2. 使用 runtimeConfig:

    • 在 nuxt.config.ts 文件中配置 runtimeConfig 选项。
    • runtimeConfig 有两个属性: public 和 private。
    • public 属性中的配置会被暴露给客户端,private 属性中的配置只能在服务器端访问。
    • 示例: 
      export default {
  runtimeConfig: {
    public: {
      apiKey: process.env.API_KEY || 'default_api_key',
    },
    private: {
      databaseUrl: process.env.DATABASE_URL,
    },
  },
};
    • 在代码中使用 useRuntimeConfig() 函数来访问这些配置: 
      import { useRuntimeConfig } from '#app';

export default {
  setup() {
    const runtimeConfig = useRuntimeConfig();
    const { apiKey } = runtimeConfig.public;
    const { databaseUrl } = runtimeConfig.private;

    // 使用 apiKey 和 databaseUrl
  },
};

  3. 使用命令行参数:

    • 在运行 Nuxt 命令时,可以通过命令行参数传递环境变量。
    • 例如: npx nuxt --API_KEY=your_api_key
    • 在代码中使用 process.argv 数组来获取这些参数。

  4. 使用 dotenv-webpack 插件:

    • 这个插件可以从 .env 文件中加载环境变量,并将它们注入到 Webpack 的 DefinePlugin 中。
    • 您需要先安装 dotenv-webpack 包: 
      npm install --save-dev dotenv-webpack
    • 然后在 nuxt.config.ts 文件中配置这个插件: 
      import dotenvWebpack from 'dotenv-webpack';

export default {
  webpack: {
    plugins: [
      new dotenvWebpack(),
    ],
  },
};
    • 可以在代码中使用 process.env.API_KEY 来访问环境变量。

现在我们来对第二种方式runtimeConfig进行一些改造，我希望可以集中管理我的环境变量而不是直接在Nuxt.config.ts中编写 还是定义.env文件，在env文件中自定义我们的环境变量，但是注意格式以NUXT_开头，然后在Nuxt.config.ts中添加

/**
 * 获取自定义环境变量（以NUXT_开头的环境变量都视作是自定义的环境变量）
 * @param obj
 * @returns
 */
function getOwnEnv(env: Record<string, any>): Record<string, any> {
  const ownEnv: Record<string, any> = {};
  for (const key in env) {
    if (
      Object.prototype.hasOwnProperty.call(env, key) &&
      key.startsWith('NUXT_')
    ) {
      ownEnv[key] = env[key];
    }
  }
  return ownEnv;
}

在runtimeConfig中应用

  runtimeConfig: {
    public: {
      ...getOwnEnv(process.env),
    }
  },

然后在其他文件中使用useRuntimeConfig().public,就可以获取到我们的环境变量了。

3 SEO配置

Nuxt 3 支持同构渲染(Universal Rendering)的特性,也称为"服务器端渲染 (SSR) 和客户端渲染 (CSR) 的结合"。这意味着 Nuxt 应用程序可以在服务器端进行初次渲染,然后在客户端进行后续的交互和更新。

同构渲染的主要优点包括:

  1. SEO 优化:

    • 服务器端渲染可以确保页面内容在首次加载时就可以被搜索引擎爬虫抓取,从而提高页面的搜索引擎优化 (SEO) 效果。

  2. 更快的初次加载速度:

    • 服务器端渲染可以提供更快的初次页面加载速度,因为页面内容已经预先渲染好,不需要在客户端进行渲染。

  3. 更好的用户体验:

    • 服务器端渲染可以提供更流畅的初次页面加载体验,而客户端渲染则可以处理后续的交互和更新,提供更好的用户交互体验。

在 Nuxt 3 中,同构渲染的工作流程如下:

  1. 服务器端渲染 (SSR):

    • 当用户首次访问应用程序时,Nuxt 会在服务器端渲染页面,生成完整的 HTML 响应。
    • 这个 HTML 响应会被发送回客户端,为用户提供快速的初次加载体验。

  2. 客户端渲染 (CSR):

    • 当页面加载完成后,Nuxt 会在客户端接管页面交互和更新,提供流畅的用户体验。
    • 这种方式可以减少不必要的服务器请求,提高应用程序的整体性能。

通过这种同构渲染的方式,Nuxt 3 可以在保持良好 SEO 和初次加载速度的同时,也提供流畅的用户交互体验。开发者可以专注于编写应用程序逻辑,而无需过多考虑渲染的复杂性。

SEO的基础知识这里就不做过多介绍了，现在我们来配置一下Nuxt中的SEO相关的东西

  1. Head 配置:

    • 在 nuxt.config.ts 文件中的 app.head 选项中,我们可以配置应用程序的 HTML <head> 部分。
    • 常见的 SEO 相关配置包括:
      • title: 网页标题
      • meta: 各种 meta 标签,如 description、keywords、og:* 等
      • link: 链接标签,如 rel="canonical"
    export default {
  app: {
    head: {
      title: 'My Nuxt 3 App',
      meta: [
        { name: 'description', content: 'My amazing Nuxt 3 app' },
        { name: 'keywords', content: 'nuxt,vue,seo' },
        { property: 'og:title', content: 'My Nuxt 3 App' },
        { property: 'og:description', content: 'My amazing Nuxt 3 app' },
      ],
      link: [
        { rel: 'canonical', href: 'https://example.com/page' },
      ],
    },
  },
}

  2. Dynamic Head 配置:

    • 我们可以在组件中使用 useHead() 钩子来动态配置页面级别的 SEO 元数据。
    • 这样可以根据当前页面的内容来优化 SEO 设置。
    import { useHead } from '#app';

export default {
  setup() {
    useHead({
      title: 'Dynamic Page Title',
      meta: [
        { name: 'description', content: 'Dynamic page description' },
      ],
    });
  },
}

  3. Sitemap 生成:

    • Nuxt 3 提供了 @nuxt/sitemap 模块,可以自动生成站点地图 (sitemap) 文件。
    • 在 nuxt.config.ts 中配置 sitemap 的选项,如网站根 URL、排除路由等。
    export default {
  modules: ['@nuxt/sitemap'],
  sitemap: {
    hostname: 'https://example.com',
    exclude: ['/secret', '/admin'], // 排除特定路由
  },
}

  4. Robot.txt 生成:

    • Nuxt 3 还提供了 @nuxt/robots 模块,可以自动生成 robots.txt 文件。
    • 在 nuxt.config.ts 中配置 robots.txt 的内容。
    export default {
  modules: ['@nuxt/robots'],
  robots: {
    UserAgent: '*',
    Disallow: ['/secret', '/admin'],
  },
}

这些是 Nuxt 3 中常见的 SEO 配置选项。

结语

本次分享了Nuxt工程化的配置，通过替换路由的方式整合多端项目、nuxt环境变量配置的改进以及SEO配置相关。

avatar
文章
阅读
粉丝