addServerHandler

在之前的實作當中，我把 sidebar 內的項目移出來到

server/api/sidebar-item.ts 模擬透過 api 獲取 sidebar 項目的情境，隨著 module 的建立，這個檔案也會移動到 src/runtime/server/api/sidebar-item.ts

昨天引入 layout 後 sidebar 項目並沒有跟著一起進來，且 terminal 也出現相對應的提示

[Vue Router warn]: No match found for location with path "/api/sidebar-item"

說它找不到 api/sidebar-item 這個檔案呀！

那麼接下來就來解決這個問題吧 :)

step 1: 引入 addServerHandler

import {addServerHandler} from '@nuxt/kit'

step 2: addServerHandler， route設定 api 路徑、handler 抓取檔案的位置

addServerHandler({
  route: '/api/sidebar-item',
  handler: resolver.resolve('./runtime', 'server', 'api', 'sidebar-item'),
})

完成後重新 npm run dev，就可以看到 sidebar 項目成功引入啦！

alias

快速解決完 sidebar ，再來就是圖片引入的問題了～

讓我們回到昨天說要先隱藏的圖片的地方，先把註解打開來再 npm run dev 一次

  <div class="flex items-center">
    <a class="navigation-logo" href="/">
          <div class="w-10 mr-2">
           <!-- 先註解掉 logo -->
          <!-- <img src="@/assets/images/seal.png" alt="logo"> -->
        </div>
        我的 UI 元件庫
    </a>
    <div
      class="navigation-menu flex items-center pr-5 duration-150 ease-in hover:scale-125"
      @click="isSidebarFold = !isSidebarFold"
    >
      <Icon
        name="mdi:arrow-collapse-right"
        :class="{'rotate-180': isSidebarFold}"
      />
    </div>
  </div>
</div>

會看到以下錯誤

Failed to resolve import "@/assets/images/seal.png" from "virtual:nuxt:/.../nuxt-seal-module/playground/.nuxt/layouts.demo-layout.a21b0672.vue". Does the file exist?

表示說他找不到這個檔案

再往下看應該可以看到具體的提示…

41 |  import _imports_0 from "@/assets/images/seal.png";
   |                          ^

有個箭頭指向了 @ !!!

@在 vue 中的指的是 src的別名，免去我們用相對路徑時要 ../ 指定的路徑的麻煩！

由此推斷大概是 alias 這邊出問題了

以前在開發 Nuxt 時，我們可以透過 nuxt.config.ts 來加入 alias 設定，像是這樣：

// nuxt.config.ts
export default defineNuxtConfig({
    alias: {
        "@Components": "./components",
    }
})

那麼在 module 內，我們可以透過 module.ts 來新增這個設定，這邊我將 #seal 指向了 runtime 資料夾

_nuxt.options.alias['#seal'] = resolver.resolve('./runtime')

接著把路徑改一下

首先將路徑 import 進來，再放入 src 路徑內，圖片就可以正常進來囉！

<script lang="ts" setup>
    import logo from '#seal/assets/images/seal.png'
</script>
<template>
  <div class="flex items-center">
    <a class="navigation-logo" href="/">
          <div class="w-10 mr-2">
           <!-- 改成這樣 -->
          <img :src="logo" alt="logo">
        </div>
        我的 UI 元件庫
    </a>
    <div
      class="navigation-menu flex items-center pr-5 duration-150 ease-in hover:scale-125"
      @click="isSidebarFold = !isSidebarFold"
    >
      <Icon
        name="mdi:arrow-collapse-right"
        :class="{'rotate-180': isSidebarFold}"
      />
    </div>
  </div>
</div>

Nuxt Configuration: https://nuxt.com/docs/api/nuxt-config