Q&A
＞似たような症状への対応で「vue.config.jsのpublicPathを './' とする」というものがあり、対応してみましたが、状況は変わりませんでした。
とありますが、具体的には、どのような処置（ファイル名・ファイルの中身・設置場所等）をされたのでしょうか？
Vue.js で作成したWebアプリにChromeでアクセス時した際、表示待ち状態となってしまいます。
似たような症状への対応で「vue.config.jsのpublicPathを './' とする」というものがあり、対応してみましたが、状況は変わりませんでした。
以下確認できている状況です。
- ビルドによりdistフォルダに生成されたファイル index.html を直接ブラウザで開くと、問題なく表示される
- 「シークレットモード」だと、問題なく表示される
- ブラウザのキャッシュを何度も消してみたが状況は変わらず
- 初回アクセスする環境（PC＆ブラウザ）では上手くいっています
- デベロッパーツール上ではindex.htmlと各jsファイルを（ステータスコード200で）取得できているが、「応答」のタブには何も表示されていない（ロード中？）
- デベロッパーツール上ではソースを見ることができない状態です
- デベロッパーツールの「Console」にエラーは表示されていません
- サーバーの起動は
vue-cli-service serveにて行っています
何か確認すべき点や解決策がありましたら、ご教示くださいますようお願いします。
コメントありがとうございます。
記載済みの情報も含めて以下に追記します。
- 編集したファイルは「vue.config.js」です。これはプロジェクトのフォルダ直下にあるものです。
- 編集した内容は module.exports の値として publicPath: './' を追加しました。
参照したサイトは、https://web-guided.com/974/ です。
回答になっていますでしょうか。
返答ありがとうございます。
参考サイトも見ましたが、記載に間違いは見受けれませんでした。
また、私の環境においても、再現は出来ませんでした。
一応の認識の共有ですが、発生している事象は、
①npm run serveコマンドでアプリをhttp://localhost:8080等に立てる
②http://localhost:8080にChromeでアクセス
③ブラウザは真っ白
で合っていますでしょうか？
事象は記載頂いた通りで間違いありません。
①のサーバー起動はコマンド「vue-cli-service serve」で行っています。（内部的には同じことかもしれませんが）
また、重ねての情報となりますが、初回を含めしばらくは問題なく動いていて、ある時点から動かなくなるのでキャッシュが怪しいとは思っています。シークレットモードでも問題ないですし。
しかし、ブラウザのキャッシュ削除（メニューから、および実ファイル削除も試しました）でも解決せず、質問させていただいた次第です。
情報共有ありがとうございます。
＞初回を含めしばらくは問題なく動いていて、ある時点から動かなくなる
この認識がありませんでした。
申し訳ありません。
「vue.config.jsのpublicPathを './' とする」の対処は、
アクセスした時点でずっと真っ白な場合の対処方法になります。
＞初回を含めしばらくは問題なく動いていて、ある時点から動かなくなる
とのことですので、この「「ある時点」に発生している処理」に問題があると推測します。
可能ならば、ソースコードを質問本文に追記をお願いできないでしょうか？
コメントありがとうございました。
＞「vue.config.jsのpublicPathを './' とする」の対処は、
＞アクセスした時点でずっと真っ白な場合の対処方法になります。
この症状の原因としては、「アクセスしたページに記載されているリソース（jsおよびcss）が無い」と判定されているのだと思います。
今回も、ビルド結果の生成物で、index.4736b0cb.js、chunk-vendors.1128db36.jsのようにビルド毎に変化する？英数字が付与されたファイルができており、「トップページはキャッシュで表示されるが、参照js/cssがない」という状況である可能性を考えています。
＞ 可能ならば、ソースコードを質問本文に追記をお願いできないでしょうか？
すみません。関連ソースが多すぎることと、個人プロダクトでは無いため、全てを公開することができません。ご了承ください。
返答ありがとうございます。
＞この症状の原因としては、「アクセスしたページに記載されているリソース（jsおよびcss）が無い」と判定されているのだと思います。
ファイルの有無についての確認は簡単です。
vueプロジェクトを作成した時から、public/index.htmlを弄っていなければ、
下記手順で確認できるかと思います。
1.Chrome上で、右クリック
2.ページのソース表示
3.別タブで、public/index.htmlの内容＋ビルドで生成された、chunk-vendors.1128db36.js等のファイルがリンクになっている
4.該当のファイルのリンクをクリック
引き続きのサポート感謝いたします。
提示頂いた方法を試そうとしたところ、最初の右クリックからのソース表示ができません。ページが読み込み中となっているからだと思われます。
開発者ツールを立ち上げたページで、URLを変更してアクセスすることはできました。
相変わらずソースの中身は確認することができませんが、Networkタブにて取得しようとしているリソースを確認することができました。
結果、vueのビルド時にコンソール表示されたファイルを取得しようとしています。
'''
Entrypoints:
index (2.02 MiB)
css/chunk-vendors.f45985fa.css
js/chunk-vendors.1128db36.js
css/index.5a8dacfb.css
js/index.27247161.js
'''
気になった点として、プロジェクトのdistフォルダには
css/index.5a8dacfb.css
js/index.27247161.js
が存在していません。アクセスしているのは別のフォルダなのでしょうか。
（distフォルダのindex.htmlが参照しているのは、存在している別名のファイルです）
＞最初の右クリックからのソース表示ができません
なるほど。
これって、serveコマンドでサーバーを立てた後に、http://localhost:8080に初回アクセスした時点でも、ダメなのでしょうか？
＞アクセスしているのは別のフォルダなのでしょうか。
私の環境だと、package.jsonに
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
とあるので、vue-cli-serviceのserve・buildは同じ挙動をすると仮定するので、
適宜読み替えて欲しいのですが、
npm run build で作成したdistの中身は、npm run serveで表示されるファイルとは別物です。
試しに、distを別の場所に退避（プロジェクトから外す）させてみてください。
npm run serveをしても、distは作成されません。
serveコマンドをすれば、以下のように出ると思うので、
そこで、表示されたものは、どのようになっていますか？
App running at:
- Local: http://localhost:8080
- Network: http://192.168.2.211:8080
> これって、serveコマンドでサーバーを立てた後に、http://localhost:8080に初回アクセスした時点でも、ダメなのでしょうか？
コマンド直後でもダメです。
ただ、初回アクセスの捉え方にもよるのですが、例えばポート番号を変えたりすると、その直後は上手くいきます。
serveコマンドの実行により、下記内容が表示されます。
==============================
> vue-cli-service serve
INFO Starting development server...
40% building 30/36 modules 6 active ...dist\cjs.js??ref--0-0!D:\nodejs\projects\infospace_dev\node_modules\vue-loader\lib\index.js??vue-loader-options!D:\nodejs\projects\infospace_dev\src\App.vue?vue&type=script&lang=js&Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
98% after emitting CopyPlugin
DONE Compiled successfully in 14328ms 17:00:28
App running at:
- Local: http://localhost:8080
- Network: http://192.168.1.127:8080
==============================
なるほど。
画面上でリンクを踏んだり、ボタンを押したとかではなく、
アクセスを繰り返していると、「ある時点から動かなくなる」という認識です。
長々と、お付き合いをして頂いたのに恐縮ですが、私の手には余る事案のようです。
ごめんなさい。
Vue公式の日本語フォーラムだと、より詳しい方の支援を受けられるかもしれません。
https://forum.vuejs.org/c/japanese
こちらこそ、色々助言頂き、現象の理解も深まりました。
どうしても解決法が見えなければ、公式フォーラムにも投稿してみたいと思います。
ありがとうございました。
回答1件
0
自己解決
認証絡みのvue-routerの設定に問題があり、一定条件下で無限ループに陥っていたようです。
そのため、認証情報がクリアされている状況では上手くいっていました。
投稿2020/11/04 11:45
総合スコア629
あなたの回答
tips
プレビュー
