VueJs не перезагружается и не загружается в DevTools

Последние 2 недели я разрабатывал новый проект с использованием VueJs + VueX, и он работал довольно хорошо. Недавно я добавил файл vue.config.js, чтобы получить номер версии из моего пакета json в приложении.

Поскольку я добавил это, горячая перезагрузка перестала работать, и на сегодняшний день VueTools не понимает, что мой сайт является сайтом Vue. Когда я хочу обновить сейчас, мне нужно сделать полное обновление, которое немного замедляет работу из-за некоторых обновлений состояния.

Это всего лишь мой второй раз, когда я использую Vue для реального продукта, и в первый раз я не видел ни одной из этих проблем. В чем здесь может быть проблема?

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

Мой файл vue.js.config:

var webpack = require("webpack");

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        "process.env": {
          APP_VERSION: JSON.stringify(require("./package.json").version)
        }
      })
    ]
  },
  devServer: {
    // host: 'localhost',
    // // disableHostCheck: true,
    // watchOptions: {
    //   poll: true
    // }
  }
};

Вещи, которые я пробовал

То, что закомментировано, — это решения, предлагаемые в разных местах в Интернете, ни одно из них не работало по отдельности или все вместе.

Я удалил свои модули узлов, переустановил, снова запустил, используя npm run serve, и это не сработало.

Я несколько раз перезапускал свою машину и IDE Visual Code.

Я сильно обновил свой браузер и очистил кеш там

С чего мне начать искать, если я хочу найти в этом проблему и устранить ее самостоятельно?

Обновлять

Я на шаг ближе. Горячая перезагрузка работает после того, как я изменил свой vue.config.js на

var webpack = require("webpack");

module.exports = {
  configureWebpack: config => {
    config.plugins.push[
      new webpack.DefinePlugin({
        "process.env": {
          APP_VERSION: JSON.stringify(require("./package.json").version)
        }
      })
    ]
  }
};

Инструменты Vue все еще не работают в моем браузере, они будут обновлены, когда я заработаю.

Обновление 2 Горячая перезагрузка только иногда работает с новым конфигом. Мне все еще нужно перезагрузить для изменений в моих методах.

Обновление 3 Это на самом деле просто сломало мою версию, поэтому я возвращаюсь к своей старой конфигурации и пока просто нажимаю F5.

Привет! Согласно документы: If you need conditional behavior based on the environment, or want to directly mutate the config, use a function (which will be lazy evaluated after the env variables are set). измените способ использования configureWebpack на configureWebpack: config => { if (process.env.NODE_ENV === 'production') {

Varit J Patel 24.03.2019 06:17

@ varit05 Я прочитал документы. Я не вижу связи с тем, что моя среда отладки не работает и не использует это. Можете ли вы объяснить немного больше. Я обновил свою конфигурацию, чтобы она соответствовала тому, что вы сказали, но это не имеет значения.

Filled Stacks 24.03.2019 06:30

@ varit05 Использование этой настройки, похоже, сработало, когда я не устанавливаю для своих плагинов один набор значений, а вместо этого добавляю новый в плагины. Спасибо, что указали мне правильное направление.

Filled Stacks 24.03.2019 06:42

Рад, что помог тебе. Я добавляю это, чтобы ответить. Пожалуйста, примите это.

Varit J Patel 24.03.2019 06:45

@ varit05 это работает только для горячей перезагрузки, инструменты vue все еще не работают. У меня есть обновленная конфигурация в моем вопросе выше, сильно отличающаяся от того, что вы рекомендовали использовать production.env:/

Filled Stacks 24.03.2019 06:47

@ varit05 оказывается, что это не всегда работает. Синхронизируются только некоторые изменения, мне все еще нужно обновить браузер для обновлений внутренней логики.

Filled Stacks 24.03.2019 06:54
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
113
0

Другие вопросы по теме