tmegos blog

I love school idols / Web developer

Viteでbackend integrationしているときのvite-plugin-checkerの設定

HTMLテンプレートに以下のscriptを追加する

<script type="module">
  import { inject } from 'http://localhost:5173/@vite-plugin-checker-runtime'
  inject({ overlayConfig: {}, base: '/' })
</script>

http://localhost:5173はViteが動作しているURL)

なぜ

Viteをそのまま使っていると、以下のようにHTMLにスクリプトが埋め込まれる

https://github.com/fi3ework/vite-plugin-checker/blob/acf6b83b6e5e718de047ce9727fd45b096de0677/packages/vite-plugin-checker/src/main.ts#L141-L157

しかしバックエンドとの統合 | Viteのように独自のHTMLテンプレートを持っている場合、この埋め込みができないため自分でスクリプトを埋め込む必要がある

@vitejs/plugin-reactを使っている場合に必要なスクリプトと同じイメージ)