前提・実現したいこと
Nuxt.jsとVuetifyで作ったサイトをfirebaseにデプロイしてアクセスできるようにしたい。
発生している問題・エラーメッセージ
Nuxt.jsとVuetifyでゲームの攻略サイト(アプリ?)を作っているのですが、firebaseにデプロイしてCrossBrowserTestingというサイトで表示を確認したところ、以下のようにWindows10 (IE11)やiPhone(Safari 12)、Mac OSX(Safari 12)などでうまくレンダリングされませんでした。
友人のiPhoneでも試してもらいましたが、ChromeとSafariどちらも同じ結果でした。
Windows10のChrome, FireFoxや、GalaxyのChromeなどでは正しく表示されています。
iPhoneやMacの表示を見る限りだと、コンポーネントだけでなくCSSもうまく読み込まれていない状態です。フッターやヘッダーなどは表示されていますが、表示は崩れていてハンバーガーメニューをクリックしても何も起きません。
フッターにあるリンクからプライバシーポリシーページへ遷移することはできますが、遷移先でもCSSがうまく読み込まれておらず表示が崩れています。(CSSが全く読み込まれていない訳ではなく、背景画像やコンポーネントの背景色などは読み込まれています)
該当のソースコード
コードが多すぎて何を貼ればよいのか分からないのですが、とりあえずpackage.jsonを貼っておきます。
"name": "app", "version": "1.0.0", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, "dependencies": { "@babel/plugin-transform-runtime": "^7.15.8", "@babel/runtime": "^7.15.4", "@nuxtjs/axios": "^5.13.6", "core-js": "^3.15.1", "firebase": "^8.10.0", "firebaseui": "^4.8.1", "genshin-db": "^3.12.3", "nuxt": "^2.13.3", "nuxt-i18n": "^6.28.1", "rfdc": "^1.3.0", "uuid": "^8.3.2", "vue": "^2.6.14", "vue-mutation-observer": "^0.1.2", "vuetify": "^2.5.8", "yaml-loader": "^0.6.0" }, "devDependencies": { "@babel/polyfill": "^7.12.1", "@babel/preset-env": "^7.15.6", "@nuxtjs/vuetify": "^1.12.1" }
試したこと
vueやvuetifyの再インストールは試しましたが改善しませんでした。
フッター以外のコンポーネントを削除してCSSがうまく読み込まれるかどうかも試してみましたが、表示は変わりませんでした。
ウェブサイトを作るのが初めてで、なぜこのような差異が生まれるのかが全く分かりません。
ググってもみましたが、同じ症状の人が見つからず完全に手詰まりなので、どなたかご教授いただければ幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/12/21 01:14