# WSL 裡的 vite dev server 公開到區網

用 WSL 開發 vue 時，想利用另一台電腦看 vite server 的預覽，因為 WSL 沒辦法直接公開到區網，所以又問ChatGPT、查了半天。最後又是熟悉的大老ivon的方法解決
https://ivonblog.com/posts/wsl-network-mirrored-mode/

## Solution
1. 調整WSL2網路為鏡像模式
我又懶得打了，請參考[ivon的教學](https://ivonblog.com/posts/wsl-network-mirrored-mode/#2-%E8%AA%BF%E6%95%B4wsl2%E7%B6%B2%E8%B7%AF%E7%82%BA%E9%8F%A1%E5%83%8F%E6%A8%A1%E5%BC%8F)
:::warning
vite 的port是5173，防火牆請開全部

Set-NetFirewallHyperVVMSetting -Name '{40E0AC32-46A5-438A-A0B2-2B479E8F2E90}' -DefaultInboundAction Allow

或開 5173 port

New-NetFirewallHyperVRule -Name "MyWebServer" -DisplayName "My Web Server" -Direction Inbound -VMCreatorId '{40E0AC32-46A5-438A-A0B2-2B479E8F2E90}' -Protocol TCP -LocalPorts 5173.

:::

2. 設定 `vite.config.js`
在 `export default defineConfig` 加入:

server: {
    host: '0.0.0.0',
    port: 5173,
}

3. 結果
如果 `npm run build` 後找到192.168.xxx.xxx的Network應該就是成功了(大部分人的區網IP應該都是 `192.168.xxx.xxx`)