CODEWITHSUNDEEP
vue.jsionic-frameworkwebpack
obe
obe

Reputation: 7788

Where to put Vue configurations (in an Ionic project)

I am using Ionic + Vue.

I want to disable Vue hot-reload.

I found this: https://vue-loader.vuejs.org/guide/hot-reload.html#usage

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        hotReload: false // disables Hot Reload
      }
    }
  ]
}

But I can't figure out where to put this.

https://vue-loader.vuejs.org/guide/#manual-setup suggests to put it in webpack.config.js, but I don't have such file in the root of my project. I tried to add this file with the suggested configuration but it didn't have an effect.

I found vue.config.js at the root, and tried to add the above configuration in it, but got errors about unexpected configuration keys when I tried to run (using ionic serve, from the command-line).

Where should I put this configuration?

UPDATE: I tried to implement Felipe's suggestion, and it worked on its own, but I also have this: config.module.rules.delete('eslint');.

When I use both this and Felipe's suggestion - I get "error in ./src/App.vue" on ionic serve, and a more elaborate error when I open the page:

enter image description here

My full vue.config.js:

enter image description here

Upvotes: 0

Views: 1058

Answers (1)

Felipe Malara
Felipe Malara

Reputation: 1914

Try doing it like this:

// 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 }
        })
  }
}

For more info, take a look here into the docs where they specifically mention how to change the vue-loader options

Upvotes: 2

Related Questions