Tengo una aplicación Vue-cli que estoy tratando de convertir a vite. Estoy usando Docker para ejecutar el servidor. Miré un par de tutoriales y conseguí que vite se ejecutara en modo de desarrollo sin errores. Sin embargo, el navegador no puede acceder al puerto. Es decir, cuando estoy en la línea de comandos de mi macbook (fuera de Docker) no puedo curl :
$ curl localhost:8080 curl: (52) Empty reply from server Si pruebo localhost: 8081, aparece Failed to connect . Además, si ejecuto el servidor de desarrollo webpack, funciona normalmente, así que sé que el puerto de mi contenedor está expuesto.
Además, si ejecuto curl en la misma máquina virtual que ejecuta el servidor vite, funciona, entonces sé que vite está funcionando.
Aquí están los detalles:
En paquete.json:
... "dev": "vue-cli-service serve", "vite": "vite", ...Todo el archivo vite.config.ts:
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { '@': '/src' } }, plugins: [vue()], server: { port: 8080 } })El comando que inicia el contenedor:
docker-compose run --publish 8080:8080 --rm app bashEl archivo docker-compose.yml:
version: '3.7' services: app: image: myapp build: . container_name: myapp ports: - "8080:8080"El Dockerfile:
FROM node:16.10.0 RUN npm install -g npm@8.1.3 RUN npm install -g @vue/cli@4.5.15 RUN mkdir /srv/app && chown node:node /srv/app USER node WORKDIR /srv/appEl comando que ejecuto dentro del contenedor docker para vite:
npm run viteEl comando que ejecuto dentro del contenedor docker para vue-cli:
npm run devEntonces, para resumir: mi configuración funciona cuando se ejecuta el servidor de desarrollo vue-cli pero no funciona cuando se usa el servidor de desarrollo vite.
Me lo imaginé. Necesitaba agregar un atributo de "host" en la configuración, por lo que ahora mi archivo vite.config.ts es:
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { '@': '/src' } }, plugins: [vue()], server: { host: true, port: 8080 } })También puede iniciar su servidor vite con:
$ npm run dev -- --hostEsto pasa el indicador --host a la línea de comando vite.
Verá una salida como:
vite v2.7.9 dev server running at: > Local: http://localhost:3000/ > Network: http://192.168.4.68:3000/ ready in 237ms.(Estoy ejecutando una máquina virtual VirtualBox, pero creo que esto también se aplica aquí).