Где размещать конфигурации Vue (в проекте Ionic)
Я использую Ionic+Vue.
Я хочу отключить горячую перезагрузку Vue.
Я нашел это: https://vue-loader.vuejs.org/guide/hot-reload.html#usage
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
hotReload: false // disables Hot Reload
}
}
]
}
Но я не могу понять, куда это поместить.
https://vue-loader.vuejs.org/guide/#manual-setup предлагает поставить webpack.config.js, но у меня нет такого файла в корне моего проекта. Я попытался добавить этот файл с предложенной конфигурацией, но это не дало эффекта.
Я нашел vue.config.js в корне и попытался добавить в него указанную выше конфигурацию, но получил ошибки о неожиданных ключах конфигурации при попытке запуска (используя ionic serve из командной строки).
Где я должен разместить эту конфигурацию?
ОБНОВЛЕНИЕ: я попытался реализовать предложение Фелипе, и оно сработало само по себе, но у меня также есть это: config.module.rules.delete('eslint');.
Когда я использую и это, и предложение Фелипе, я получаю «ошибку в ./src/App.vue» на ionic serve и более сложную ошибку при открытии страницы:
Мои полные vue.config.js:
Ответы 1
Попробуйте сделать это так:
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// modify the options...
return { ...options, hotReload: false }
})
}
}
Для получения дополнительной информации загляните здесь в документы, где конкретно упоминается, как изменить параметры vue-loader.
По-видимому, vue-template-compiler должен быть установлен в devDependencies той же версии, что и @vue. Можете ли вы попробовать удалить node_modules и снова установить вместе с этим пакетом?
package.json и вся конфигурация сборки были созданы ionic автоматически. Я немного беспокоюсь о том, чтобы сломать другие вещи. например У меня уже есть "@vue/compiler-sfc": "^3.0.0-0", (по названию я предполагаю, что он может конфликтовать с пакетом под названием vue-template-compiler, но могу ошибаться)... почему так сложно просто отключить функцию? :((
Можно немного поковыряться, просто для вопроса, а зачем вам эслинт снимать? Это может быть очень необходимо, когда мы хотим применить хорошие шаблоны проектирования. Вместо этого вы можете изменить раздражающие вас правила, изменив файл .eslintrc.js.
Да, вы правы, я пытался отключить его раньше, но не удалось. Но теперь вы вдохновили меня попробовать еще раз, и мне это удалось. Я хотел отключить @typescript-eslint/no-unused-vars. Раньше я пробовал "no-unused-vars": "off" и это не имело никакого эффекта. Но только сейчас попробовал полную "@typescript-eslint/no-unused-vars": "off" и все работает! К сожалению, похоже, я ошибался, думая, что HMR cfg работает сам по себе. Теперь, даже без строки удаления линтера, я получаю ошибку, о которой я упоминал ранее (первый SS в разделе «ОБНОВЛЕНИЕ»)
Кстати, кажется, что npmjs.com/package/vue-template-compiler предназначен для Vue 2, но я использую Vue 3...
Давайте продолжим обсуждение в чате.
Спасибо! Он работает «сам по себе», но мне все еще трудно заставить его работать с моим существующим
vue.config.js. Я обновил вопрос, чтобы отразить это, может быть, вы могли бы помочь? Пожалуйста, смотрите дополнительный текст после маркераUPDATE:. Спасибо!