DEV Community

Alexander Gorbunov
Alexander Gorbunov

Posted on • Updated on


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:
Image description

That was a bit confusing...

I found the solution here:

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

"In defense of the modern web" β€” great classic DEV post