Fix npm run preview

[aonorito]

Background

npm run build でビルドを行ったファイルに対してプレビューを行うと、何も表示されない。

Overview

ビルドしたファイルに問題がある可能性があるので、ビルド設定かページのコードに問題があるか調査する。

Goal

npm run buildで作成したindex.htmlがプレビューで正しく表示されること。

Not to do

--describe what not to do.

[aonorito]

poker:3

[aonorito]

原因の一因の可能性として以下調査中

プロジェクトのファイルにエラーがある Vite ビルドツールは、プロジェクトのファイルにエラーがある場合、サーバを起動しないようになっています。TypeScript で記述されたファイルにエラーがある場合は、コンパイルエラーが発生し、サーバに接続できなくなります。エラーメッセージを確認し、ファイル内のエラーを解決することで、サーバに接続できるようになる可能性があります。

[Z-zia]

ChatGPTっぽいメッセージやね。 viteコマンドで起動できて、buildしたものが失敗する謎。

[Z-zia]

dockerを使ってるので、

デフォルトで3000ポートを使用します。 ローカルネットワーク上で動作するWebサーバーとして設計されています。 プロキシを使用している場合、vite previewが失敗する可能性があります。

この辺りが気になってる。 ブラウザからアクセスした際の、dockerログ、ブラウザのF12開発ツールのネットワークタブあたりを見てみると良いかもしれない。 必要に応じてdocker-composeのプロキシの設定を追加するとか？

[aonorito]

上記も含めて試そうかと思ったら、違うエラーが出てきてビルド出来なくなったから調査中

src/components/HelloWorld.vue:12:8 - error TS2322: Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'. Object literal may only specify known properties, and 'class' does not exist in type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'.

12

[aonorito]

マージ完了