質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

解決済

1回答

1890閲覧

Vue.js で作成したWebアプリが表示待ち状態となる

plasticgrammer

総合スコア629

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2020/10/08 07:50

編集2020/10/30 01:13

Vue.js で作成したWebアプリにChromeでアクセス時した際、表示待ち状態となってしまいます。

似たような症状への対応で「vue.config.jsのpublicPathを './' とする」というものがあり、対応してみましたが、状況は変わりませんでした。

以下確認できている状況です。

  • ビルドによりdistフォルダに生成されたファイル index.html を直接ブラウザで開くと、問題なく表示される
  • 「シークレットモード」だと、問題なく表示される
  • ブラウザのキャッシュを何度も消してみたが状況は変わらず
  • 初回アクセスする環境(PC&ブラウザ)では上手くいっています
  • デベロッパーツール上ではindex.htmlと各jsファイルを(ステータスコード200で)取得できているが、「応答」のタブには何も表示されていない(ロード中?)
  • デベロッパーツール上ではソースを見ることができない状態です
  • デベロッパーツールの「Console」にエラーは表示されていません
  • サーバーの起動はvue-cli-service serveにて行っています

何か確認すべき点や解決策がありましたら、ご教示くださいますようお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Arice_Banan

2020/10/28 01:44

>似たような症状への対応で「vue.config.jsのpublicPathを './' とする」というものがあり、対応してみましたが、状況は変わりませんでした。 とありますが、具体的には、どのような処置(ファイル名・ファイルの中身・設置場所等)をされたのでしょうか?
plasticgrammer

2020/10/28 05:23 編集

コメントありがとうございます。 記載済みの情報も含めて以下に追記します。 - 編集したファイルは「vue.config.js」です。これはプロジェクトのフォルダ直下にあるものです。 - 編集した内容は module.exports の値として publicPath: './' を追加しました。 参照したサイトは、https://web-guided.com/974/ です。 回答になっていますでしょうか。
Arice_Banan

2020/10/28 06:46 編集

返答ありがとうございます。 参考サイトも見ましたが、記載に間違いは見受けれませんでした。 また、私の環境においても、再現は出来ませんでした。 一応の認識の共有ですが、発生している事象は、 ①npm run serveコマンドでアプリをhttp://localhost:8080等に立てる ②http://localhost:8080にChromeでアクセス ③ブラウザは真っ白 で合っていますでしょうか?
plasticgrammer

2020/10/29 02:43 編集

事象は記載頂いた通りで間違いありません。 ①のサーバー起動はコマンド「vue-cli-service serve」で行っています。(内部的には同じことかもしれませんが) また、重ねての情報となりますが、初回を含めしばらくは問題なく動いていて、ある時点から動かなくなるのでキャッシュが怪しいとは思っています。シークレットモードでも問題ないですし。 しかし、ブラウザのキャッシュ削除(メニューから、および実ファイル削除も試しました)でも解決せず、質問させていただいた次第です。
Arice_Banan

2020/10/29 03:04

情報共有ありがとうございます。 >初回を含めしばらくは問題なく動いていて、ある時点から動かなくなる この認識がありませんでした。 申し訳ありません。 「vue.config.jsのpublicPathを './' とする」の対処は、 アクセスした時点でずっと真っ白な場合の対処方法になります。 >初回を含めしばらくは問題なく動いていて、ある時点から動かなくなる とのことですので、この「「ある時点」に発生している処理」に問題があると推測します。 可能ならば、ソースコードを質問本文に追記をお願いできないでしょうか?
plasticgrammer

2020/10/29 04:59 編集

コメントありがとうございました。 >「vue.config.jsのpublicPathを './' とする」の対処は、 >アクセスした時点でずっと真っ白な場合の対処方法になります。 この症状の原因としては、「アクセスしたページに記載されているリソース(jsおよびcss)が無い」と判定されているのだと思います。 今回も、ビルド結果の生成物で、index.4736b0cb.js、chunk-vendors.1128db36.jsのようにビルド毎に変化する?英数字が付与されたファイルができており、「トップページはキャッシュで表示されるが、参照js/cssがない」という状況である可能性を考えています。 > 可能ならば、ソースコードを質問本文に追記をお願いできないでしょうか? すみません。関連ソースが多すぎることと、個人プロダクトでは無いため、全てを公開することができません。ご了承ください。
Arice_Banan

2020/10/29 05:36

返答ありがとうございます。 >この症状の原因としては、「アクセスしたページに記載されているリソース(jsおよびcss)が無い」と判定されているのだと思います。 ファイルの有無についての確認は簡単です。 vueプロジェクトを作成した時から、public/index.htmlを弄っていなければ、 下記手順で確認できるかと思います。 1.Chrome上で、右クリック 2.ページのソース表示 3.別タブで、public/index.htmlの内容+ビルドで生成された、chunk-vendors.1128db36.js等のファイルがリンクになっている 4.該当のファイルのリンクをクリック
plasticgrammer

2020/10/29 06:56

引き続きのサポート感謝いたします。 提示頂いた方法を試そうとしたところ、最初の右クリックからのソース表示ができません。ページが読み込み中となっているからだと思われます。 開発者ツールを立ち上げたページで、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が参照しているのは、存在している別名のファイルです)
Arice_Banan

2020/10/29 07:42

>最初の右クリックからのソース表示ができません なるほど。 これって、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
plasticgrammer

2020/10/29 08:04 編集

> これって、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 ==============================
Arice_Banan

2020/10/30 00:47

なるほど。 画面上でリンクを踏んだり、ボタンを押したとかではなく、 アクセスを繰り返していると、「ある時点から動かなくなる」という認識です。 長々と、お付き合いをして頂いたのに恐縮ですが、私の手には余る事案のようです。 ごめんなさい。 Vue公式の日本語フォーラムだと、より詳しい方の支援を受けられるかもしれません。 https://forum.vuejs.org/c/japanese
plasticgrammer

2020/10/30 01:07

こちらこそ、色々助言頂き、現象の理解も深まりました。 どうしても解決法が見えなければ、公式フォーラムにも投稿してみたいと思います。 ありがとうございました。
guest

回答1

0

自己解決

認証絡みのvue-routerの設定に問題があり、一定条件下で無限ループに陥っていたようです。
そのため、認証情報がクリアされている状況では上手くいっていました。

投稿2020/11/04 11:45

plasticgrammer

総合スコア629

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問