Running the dev server on a specified port

[farnazj]

Describe the bug
I'm trying to run the development server on a port other than the default. I have tried setting the port by modifying the serve script in package.json and adding the port, setting it in .env, and also in vue.config.js but none works.

To Reproduce
in vue.config.js:

 devServer: {
    port: 9091
  }

[Kocal]

As specified in the Vue-CLI documentation, you must pass --port to specify which port you want to use.

[farnazj]

I have also tried doing that through the command line and in package.json but it always starts on the default.

[farnazj]

Oh sorry I think the problem I'm having is actually not that Vue app doesn't take the specified port, but that the webpack extension reloader is always launched on the default port 9090. I'm trying to run 2 extensions in dev mode, but the second can't start because the port 9090 is already in use.

[ikmil]

I have the same problem, but my 9090 port is not occupied, also indicating that it is occupied

[farnazj]

I solved this issue by modifying the webpack config and running the extension reloader on a different port. In vue.config.js:

  chainWebpack: (config) => {
    config.plugin('extension-reloader').tap( args => [{
       port: 9091, // Which port use to create the server
       reloadPage: true, // Force the reload of the page
       entries: { // The entries used for the content/background scripts or extension pages
         background: 'background',
         contentScript: [
           'content-script'
         ]
       }
    }])
}

However, for some reason, having this in vue.config.js gets in the way of building the extension for production, so comment it out when building for production.