web-dev-qa-db-ja.com

Vue.js Chrome DevtoolsがVue.jsを検出しないのはなぜですか？

シンプルな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>
vue.jsdevtools
20
Simon Suh

選択肢の1つは、OP 既に述べた のように、ローカルWebサーバーをセットアップすることです。
もう1つ-IMHOの方が高速でハラスメントが少ない-は、拡張機能がファイルURLにアクセスできるようにするもので、デフォルトでは無効になっています。

単にchrome://extensionsを選択し、Vue.js devtoolsの[ファイルURLへのアクセスを許可する]チェックボックスをオンのままにします。

ソース： http://codersdeck.com/vue-js-2-setting-vue-devtools/

46
Seza

これを解決するには、単にchrome://extensions/、Vue.js devtoolsまで下にスクロールし、チェックボックスをクリックして「ファイルURLへのアクセスを許可」を有効にします。

ソース： https://github.com/vuejs/vue-devtools/issues/236

7
oriolowonancy

同じ問題があり、追加して解決しました

Vue.config.devtools = true;

vue.jsインポートスクリプトの後、chrome devtoolsをご覧ください。Vueというタブが表示され、vueインスタンスを検査します。

参照： https://vuejs.org/v2/api/#devtools

6
22nds

私は答えを見つけました、私は私のコンピューターでプレーンなhtmlファイルを見ていましたが、それはvue.jsツールをロードしていませんでした。ローカルのxamppサーバーをロードし、ローカルマシンサーバーのURLからアプリケーションを再度実行すると、vue.js devtoolsが動作するようになりました。 :)

4
Simon Suh

また、Vue config： https://vuejs.org/v2/api/#devtools で無効にすることができます

4
Dabbbb.

chromeブラウザの拡張フォルダで、vue devtools拡張の詳細タブの下で、ファイルURLへのアクセスを許可するボックスにチェックマークを付けてください。 。

2
monisha sampath

私はこの問題を抱えており、vue-devtoolsを含めるだけで機能することを期待していました。コンソールにバージョンを記録してもらいました

console.log("Vue Version " +Vue.version );

しかし、これは実際にvueのインスタンスをロードするためには機能しませんでした。

数分かかりましたが、実際にvueインスタンスを作成したら、それが機能しました。これがdevtoolsを機能させたhello worldの例でした:)

let data = {
  message: 'Hello World'
}

new Vue({
  el: '#application',
  data: data
})
2
andylondon

同じ問題を解決しました。しかし、私の場合、Vue.js Chrome htmlファイルでは<script src="https://unpkg.com/vue"/>

それを<script src="https://unpkg.com/vue"></script>に置き換えましたChrome DevtoolsはVue.jsを完全に検出しています。

上記の例に感謝します。vue@ 2.4.4を使用し、file://でHTMLを開きます。

1
genevralancer

私は電子でVueを使用しており、電子のメイン「アプリ」がVueの「アプリ」を分離している。

デバッガーコンソールでVueと入力すると、エラーUncaught ReferenceError: Vue is not defined

ここに私の修正がありました

window.vue = new Vue({
  components: {
    App,
    Login,
  },
  router,
  store,
  template: '<App/>',
}).$mount('#app');

回避策はassigningwindow.Vueしたがって、devtoolはそれを見つけることができます。

0
TrophyGeek