開発環境のvite設定メモ


フロントエンドの開発時のコンパイルが高速で、Vueと相性がいいらしいので試しに導入して見たメモ。

  • docker-compose.ymlのWEBサーバのポートマッピングに 5173:5173 が必要。これはviteが開発中のコードをここから叩いているため。
  • CORSの対策でWEBサーバー(Apacheとか)の Header に Access-Control-Allow-Origin “*” を書くか、vite.config.jsに server: { host: true, hmr: { host: 'hoge.localhost', },}, の追記が必要。

トラブルシューティング

  • hostに直でURLを書いてしまうと、vite上でSSLが利いてしまい、
    viteにSSLを指定しないと証明書が無いことが原因でブラウザでエラーになってしまう。hmrの記述の方で書く。
    https://ja.vitejs.dev/config/server-options.html#server-hmr
  • また、hmrで書いても https: true してしまうと証明書が無くため上記と同じエラーになってしまう。

コメントを残す