Docker部署Vue3+Vite应用无法访问的问题求助

1. Start the Vite Dev Server in the Container #

Your current docker-compose.yml only initializes the Node container but doesn't run the dev server. Add the command field to execute the dev script:

frontend:
  image: node:lts
  working_dir: /var/www/html/app/
  ports:
    - '3000:3000'
  volumes:
    - ./frontend/:/var/www/html/app
  command: npm run dev

2. Install Dependencies #

If your mounted ./frontend directory lacks node_modules, the dev server will fail to start. Run this command inside the container to install dependencies:

docker-compose exec frontend npm install

3. Check Container Logs for Errors #

Verify if Vite starts successfully by viewing the container logs:

docker-compose logs frontend

Successful output should include lines like:

Local: http://localhost:3000/
Network: http://0.0.0.0:3000/

4. Verify Port Availability and Firewall #

• Ensure no other service is using port 3000 on your host:
  • Linux/macOS: lsof -i :3000
  • Windows: netstat -ano | findstr :3000
• Confirm your firewall isn't blocking incoming connections to port 3000.

5. Double-Check Configuration Files #

Confirm your package.json dev script includes --host 0.0.0.0:

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

And your vite.config.js sets the correct port:

export default defineConfig({
  server: {
    port: 3000
  },
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

After completing these steps, restart your container with docker-compose down && docker-compose up and try accessing localhost:3000 again.

内容的提问来源于stack exchange，提问作者Mena