Crie um comando no Vite que possa ser acessado de fora da máquina local.

Coisas que eu quero fazer

Se você executar o seguinte comando em um projeto criado com o Vite para iniciar o servidor, poderá acessá-lo do seu computador local por meio de um navegador ou outro aplicativo.

npm run dev

saída:

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

No entanto, não é possível acessá-lo a partir de outros computadores.

Este artigo descreve como manter o comando `npm run dev` para testes locais, permitindo também o acesso a partir de outros computadores.

Solução

Permitir acesso de outros PCs

Primeiro, tente permitir o acesso de outros computadores.

Abra o arquivo package.json no diretório raiz do projeto que você criou com o Vite e encontre a seguinte entrada.

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

Modifique esta seção da seguinte forma:

A linha `–host –port 5173` foi adicionada à linha `dev`. O número após `port` é o número da porta do servidor que será criado. Recomenda-se especificar isso, pois pode ser inconveniente se mudar ao acessar de outros computadores.

  "scripts": {
    "dev": "vite --host --port 5173",
    "build": "vite build",
    "preview": "vite preview"
  },

Após concluir as correções, execute o seguinte comando.

npm run dev

Diferentemente do que acontecia antes da correção, o endereço agora é exibido na seção Rede, permitindo o acesso de outros computadores. (Embora apareça como XXXX, o endereço IP real será exibido.)

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://X.X.X.X:5173/
  ➜  press h + enter to show help

Separe os comandos

O método acima permite o acesso a partir de outros PCs, mas, na maioria dos casos, provavelmente será melhor realizar testes locais primeiro, antes de prosseguir para os testes de rede.

Editar o arquivo package.json sempre que alteramos o método de teste é tedioso (e propenso a erros), então vamos preparar um comando separado.

Modifique o arquivo package.json da seguinte forma:

Adicionando uma linha para devnet.

Antes da revisão:

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

Após a correção:

  "scripts": {
    "dev": "vite",
    "devnet": "vite --host --port 5173",
    "build": "vite build",
    "preview": "vite preview"
  },

Após efetuar a correção, executar o seguinte comando impedirá o acesso de outros PCs.

npm run dev

saída:

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

A execução do seguinte comando permitirá o acesso a partir de outros PCs.

npm run devnet

saída:

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://X.X.X.X:5173/
  ➜  press h + enter to show help

Resultado

Consegui criar uma maneira de manter o comando `npm run dev` para testes locais, permitindo também o acesso a partir de outros computadores.