以前も【Nuxt3+Vuetify3】v-imgタグで画像表示という似たような記事書いたけども。

久しぶりに実装すると忘れる。

今回はNuxt2のGitlab Pagesで同じようなことが起きたので再度メモ。

背景

要は baseURL とか basePath とか言われてる系のものだが...正式名称がわからん。

Gitlab Pagesの無料ドメインの場合、次のようにドメインの後ろに pages/プロジェクト名 がついたURLがトップページになる。

https://hoge.gitlab.io/pages/hoge-hp/

すると imgタグのsrcで /images/logo.png と記述してると
リソースのURLが https://hoge.gitlab.io/images/logo.png になって
pages/プロジェクト名 部分が抜けてしまい404になる。

結論

nuxt.config.js に router.base を追記してあげる。

const { CI_PAGES_URL } = process.env;
const base = CI_PAGES_URL && new URL(CI_PAGES_URL).pathname;

export default {
  //...（省略）

  router: {
    base,
  },

};

vue側は $config._app から basePath が取れる

  {{ $config }}
  <img :src="`${$config._app.basePath}images/logo.png`"></img>

$config の中身はこんな感じになっていた。

  {
  "_app": {
    "basePath": "/pages/hoge-hp/",
    "assetsPath": "/pages/hoge-hp/_nuxt/",
    "cdnURL": null
  }
}

---

ChatGPT使い出してから全然記事をかかなくなった。

以上。

参考

GitLab Pages examples (opens new window)