Почему 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>

Ответы

Ответ 1

Одна альтернатива - настроить локальный веб-сервер, как уже было указано в ОП already stated.
Другой вариант, который, по моему мнению, работает быстрее и менее беспокоящ, позволяет расширению иметь доступ к 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/

Ответ 2

Чтобы решить эту проблему, просто перейдите к chrome://extensions/, прокрутите вниз до devtools Vue.js и включите "Разрешить доступ к URL-адресам файлов", установив его флажок.

Источник: https://github.com/vuejs/vue-devtools/issues/236

Ответ 3

Возникла та же проблема и решена путем добавления

Vue.config.devtools = true;

после скрипта импорта Vue.js посмотрите на chrome devtools. Вы увидите вкладку с именем Vue для проверки вашего экземпляра vue.

ссылка: https://vuejs.org/v2/api/#devtools

Ответ 4

Я узнал ответ, я просматривал простой html файл на своем компьютере, который делал инструмент vue.js не загруженным. Я загрузил мой локальный сервер xampp и снова запускал приложение с локального сервера сервера, и теперь vue.js devtools работает!:)

Ответ 5

Также вы можете отключить конфигурацию Vue: https://vuejs.org/v2/api/#devtools

Ответ 6

У меня была эта проблема, и я ожидал, что vue-devtools будут работать, просто включив ее. У меня была консольная запись версии

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

но это не помогло загружать экземпляр vue.

взял меня на несколько минут, но как только я на самом деле создал экземпляр vue, он работал. это был пример приветствия, который заставил devtools работать:)

let data = {
  message: 'Hello World'
}

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

Ответ 7

в папке расширений в браузере Chrome на вкладке сведений в расширении vue devtools установите флажок, разрешающий доступ к URL-адресам файлов, это работает для меня..

Ответ 8

Я решил ту же проблему. Но в моем случае Vue.js Chrome Devtools не обнаружил Vue.js, потому что в html файле было <script src="https://unpkg.com/vue"/>

Я заменил его на <script src="https://unpkg.com/vue"></script> Теперь Chrome Devtools отлично замечает Vue.js.

Спасибо за exapmle above.I используйте [email protected] и откройте мой html file://

Ответ 9

Я использую Vue в электронном, и у меня есть электронное главное приложение, разделенное Vue.

Когда в консоли отладчика ввод Vue выдавал ошибку Uncaught ReferenceError: Vue is not defined

Здесь было мое исправление

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

window.Vue было назначить window.Vue Позволяет devtool найти его.

Ответ 10

Если вы уже включили Allow Access to file URLs в chrome://extensions/ → Vue Devtools и он все еще не работает, попробуйте переустановить Vue Devtools, это может помочь вам.