Vite+React项目，仅允许通过localhost访问，不允许通过IP地址访问的解决方案

修改说明

问题原因: Vite默认只监听localhost(127.0.0.1)，只接受来自本机的连接。

解决方案: 设置host: '0.0.0.0'让Vite监听所有网络接口，这样就可以通过局域网IP地址访问。

使用方法

1. 重启开发服务器: 保存配置后，重启你的npm run dev或yarn dev
2. 访问方式:
   • 本地访问:http://localhost:5173/1apikey
   • 局域网访问:http://192.168.31.108:5173/1apikey
   • 或使用你电脑的任何局域网IP地址

重启后，Vite会在控制台显示所有可用的访问地址，包括本地地址和网络地址。

安全提示:0.0.0.0会让开发服务器对局域网内所有设备可见，这在开发环境是正常的，但不要在生产环境使用开发服务器。

vite.config.ts

import tailwindcss from '@tailwindcss/vite'; import react from '@vitejs/plugin-react'; import path from 'path'; import { defineConfig } from 'vite'; // https://vite.dev/config/ export default defineConfig(() => ({ plugins: [react(), tailwindcss()], // 所有资源都通过 /1apikey 路径访问 base: '/1apikey', resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, server: { host: '0.0.0.0', // 允许通过IP地址访问 port: 5173, proxy: { '/1apikey/api': { target: 'http://localhost:8000', changeOrigin: true, }, }, }, }));