なんで「Cloud9を使ってる」という一番重要な情報を書いてないのか。
Cloud9が原因。
原因が分かれば検索できるので詳しくは書かない。
「Cloud9 vite npm run dev」とかで検索すればいいだけ。
それよりもCloud9使うのをやめたほうがいい。
手元のPCで開発するのが常識。
Cloud9を日常的に使ってる人なんていない。
騙されてる初心者だけ。
初心者しか使ってないのに初心者には解決できないCloud9特有のトラブルが多い。
私はlaravel10でwebアプリケーション開発をしています。開発環境はCloud9で、アセットの構築にはviteを用いています。
javascriptの動作を確認しながら開発を進めたいため、手間のかかるnpm run buildではなくnpm run devを実行したところ、cssのレイアウトが崩れてしまいます。(npm run buildでは問題なく表示されます。)
Dockerは使用していません。
npm run devを実行しても、cssのレイアウトが崩れない解決策を教えていただきたいです。
また、関係あるかはわかりませんが、/ public/ build/ assetフォルダのcssファイルを確認したところ、エラーが出ていました。
npm run dev
vite を起動するとデフォルトでは、5173port を利用するため開放する必要があると聞いたため、package.json の修正(もしくは vite.config.js の修正)を行いました。
デフォルとの状態だと、package.json の scripts で "dev": "vite" が設定されているので、 "dev": "vite --host" へ修正しました。
"scripts": {
"dev": "vite --host",
"build": "vite build"
}
もしくは vite.config.js に server: { host: true } を追記しました。
export default defineConfig({
server: {
host: true,
},
});
いずれの方法でも解決しませんでした。
ご回答のほど、どうかよろしくお願いいたします。🙇♂️
ご回答を参考に追記します。😊
ご回答を受けて、そういえばディベロッパーツールで確認をしていなかったことに気づかされたため、レイアウトが崩れた画面でディベロッパーツールを開き、ネットワークタブとコンソールタブを確認したところ、以下のエラーが出ていました!
こちらのエラーも解決の糸口になりそうでした。
ご回答をいただき、今回、改めてディベロッパーツールの重要性を認識しました。今後は真っ先に確認します!🙆♂️
なんで「Cloud9を使ってる」という一番重要な情報を書いてないのか。
Cloud9が原因。
原因が分かれば検索できるので詳しくは書かない。
「Cloud9 vite npm run dev」とかで検索すればいいだけ。
それよりもCloud9使うのをやめたほうがいい。
手元のPCで開発するのが常識。
Cloud9を日常的に使ってる人なんていない。
騙されてる初心者だけ。
初心者しか使ってないのに初心者には解決できないCloud9特有のトラブルが多い。
@taigatomonaga
Questionerご回答ありがとうございます!🙌
無事解決できそうです!
仮想ファイルシステム(VFS:Virtual File System)への接続が存在せず、解決するにはサードパーティークッキーが許可されていないため、許可する必要があるとのことでした! すぐに検証します!
cloud9については質問に追記させていただきます!
また、cloud9には初心者に解決できない特有のトラブルが多いとのことですので、その他、VScodeなどの開発環境での開発も今後検討いたします!
ありがとうございます!😊
F12 の ネットワークタブでそのCSSは読み込まれていますか?
@taigatomonaga
Questionerご回答ありがとうございます!🙌
ありがたいことに無事解決できそうですが、こちらも確認してみます!
ありがとうございます!😊