[解決済み] Vue.js Chrome DevtoolsがVue.jsを検出しないのはなぜですか？

2022-01-28 09:45:52

質問

私は簡単な動作のVue.jsアプリケーションと次のコードを持っています。しかし、vue.jsのdevtoolsが応答しません。数日前まではうまくいっていたのですが、今はもううまくいきません。 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd すでに追加されていると表示されます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

  <title>Document</title>
</head>
<body>
<div class="container">
  <div id="application">
    <input type="text" v-model="message">
    <p>The value of the input is: {{ message }}</p>
  </div>
</div>

<script>
  let data = {
    message: 'Hello World'
  }

  new Vue({
    el: '#application',
    data: data
  })
</script>
</body>
</html>

解決方法は？

別の方法として、OPのようにローカルなWebサーバーを立ち上げることもできます。すでに述べたように .
もう1つの方法は - IMHOはより速く、より嫌がらせをしない - 拡張機能がファイルのURLにアクセスできるようにすることで、これはデフォルトでは無効になっています。

単に chrome://extensions を入力し、"を残す。 ファイルURLへのアクセスを許可する Vue.js devtoolsにチェックを入れてください。

ソースはこちら
https://github.com/vuejs/vue-devtools#common-problems-and-how-to-fix
http://codersdeck.com/vue-js-2-setting-vue-devtools/

[解決済み] Vue.js Chrome DevtoolsがVue.jsを検出しないのはなぜですか？

質問

解決方法は？

関連

未定義のプロパティ '0' を読み取ることができません。

vue3 が axios エラーを導入する未定義または null をオブジェクトに変換できない

プロキシエラーです。localhost:8090 から http:10.12.0.15:7777 へのリクエスト /queryCarList をプロキシできませんでした。

[解決済み] Vue.js - ネストされたデータを適切に監視する方法

[解決済み] Vue.jsでグローバルフィルタを大量に追加する方法は？

[解決済み】Vue.js - urlからハッシュバン#！を削除するには？

[解決済み】Vueのデータからhrefに値を渡すには？

[解決済み】Vue.jsの別ページへのリダイレクトについて

[解決済み】Vuejs：ルート変更時のイベント

[解決済み] Vue.js：各コンポーネントインスタンスにユニークなIDを設定するには？

最新

nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)

htmlページでギリシャ文字を使うには

ピュアhtml+cssでの要素読み込み効果

純粋なhtml + cssで五輪を実現するサンプルコード

ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード

タイピング効果を実現するピュアhtml+css

htmlの選択ボックスのプレースホルダー作成に関する質問

html css3 伸縮しない画像表示効果

トップナビゲーションバーメニュー作成用HTML+CSS

html+css 実装サイバーパンク風ボタン

おすすめ

[解決済み] プロジェクトのvue.jsのバージョンを確認する方法は？

_this.axios is not a functionの原因と解決方法

Vue.js学习的第一天

[解決済み] Vue.jsでグローバルフィルタを大量に追加する方法は？

vue springboot reports error DOMException: XMLHttpRequest'の'send'の実行に失敗しました。ロードに失敗しました

[解決済み】TypeError: this.getOptions は関数ではありません。

[解決済み】@clickとv-on:clickの違い Vuejs

[解決済み】Vue2でデバウンスを実装するには？

[解決済み] Vue CLI CSSプリプロセッサーオプション：dart-sass VS node-sass?

[解決済み] Vue.js：各コンポーネントインスタンスにユニークなIDを設定するには？