Vite + Vue 3 issue with ports on MacOS

Namaste to everyone! 🙏

Today I faced the issue with ports in Vite Vue project.

The trouble occured after installing Vite PWA plugin. I tried to check it and start a command:

yarn build && yarn preview

Than switching to the browser I saw this:

That was a bit confusing...

I found the solution here: https://github.com/vitejs/vite/discussions/6481

The issue is in port configuration:

you are experiencing this problem because the mac os version you are using took control over this port for a component even though these low port numbers shouldn't Ideally be used by a operating system

So, I started to use the following vite.config.ts option that solved my problems:

preview: {
    port: 4000
  },

You can find an explanation, why port 4000 was chosen in the link above :)

Thanks for reading!

UPDATE 18.02.22

As stated, this was fixed in Vite v2.8.0
So, you can just update your Vite version