WSL 使用 OpenCode 开发项目环境配置

本文介绍了 WSL 上如何安装 Opencode；并介绍了 WSL 如何复用 Windows 的代理， 确保在使用 Opencode 时网络通常；还介绍了 WSL 开发前端 Web 项目时，需要同一局域网移动设备访问本地 Vite 启动的 Web 服务器，该如何配置。

WSL 安装 OpenCode

Bash
curl -fsSL https://opencode.ai/install | bash

立即生效

Bash
source ~/.bashrc

新建项目目录，在 opencode 中打开

Bash
mkdir -p /project/opencode-test
cd /project/opencode-test

opencode

WSL 网络代理设置

OpenCode 需要科学上网，Windows 上如果开了代理，WSL 可以共用 Windows 代理。同时如果需要开发 Web 项目，肯定少不了局域网移动设备访问，两种配置方式：

一、图像界面设置

Windows 搜索 WSL Settings，打开 WSL 设置，点击左侧网络，确认以下

  • 网络模式选 ✅Mirrored
  • ✅ 主机地址回环
  • ✅ 已启用自动代理
WSL Settings
WSL Settings

二、配置文件设置

也可以用记事本记打开 C:\Users\你的用户名\.wslconfig，不存在则新建

PowerShell
notepad $env:USERPROFILE\.wslconfig

记事本输入以下内容并保存

INI
[wsl2]
networkingMode=Mirrored

[experimental]
hostAddressLoopback=true
  • networkingMode=mirrored ，WSL 默认安装的 Linux 网络走 NAT，即与 Windows 网络隔离，localhost 不互通。设置后表示走共享网络，localhost 服务是互通的
  • autoProxy=true，表示把 Windows 的代理同步到 WSL 的 Linux。默认勾选，不勾选应该是 false，如果不对就把这个加在上述的后面。
  • hostAddressLoopback=true，这个跟代理无关，顺便开启，表示启动 Web 服务器时，可以 http://ip:port 访问。但其他同局域网设备想要访问时，还需要在高级安全 Windows Defender 防火墙里，设置入站规则。

Web 开发支持多设备同一局域网访问

例如：需要移动设备 http://ip:port 访问本地 Web 应用，在真实移动设备上查看效果。

开始主机地址回环

上一步已设置

Windows 设置入站规则

两种方式设置入站规则：

先确认当前网络类型是哪个：

  1. 打开 设置 -> 网络和 Internet -> 以太网/Wi-Fi -> 点击你连接的网络名称。
  2. 查看“网络配置文件”那里显示的是“专用”还是“公用”。
  3. 如果是“公用”，如果你的网络是家庭或工作较为安全的网络，可以切换成“专用”。

1、可视化界面

  1. 按 Win + R 输入 wf.msc 并回车，打开“高级安全 Windows Defender 防火墙”。
  2. 点左侧“入站规则”，再点右侧“新建规则”。
  3. 选“端口” -> “TCP” -> “特定本地端口”（填你的端口，如 Vite 默认的 5173）。
  4. 选“允许连接” -> 配置文件勾选“专用”或/和“公用”（跟你当前网络属性需要匹配） -> 起个名保存即可。

2、命令行

PowerShell
New-NetFirewallRule `
-DisplayName "Vite 5173 LAN" `
-Direction Inbound `
-Protocol TCP `
-LocalPort 5173 `
-Action Allow `
-Profile Public,Private   # 公用选 Public，专用选 Private，都允许两个都填上或 Any

查看规则：

PowerShell
Get-NetFirewallRule -DisplayName "Vite 5173 LAN"

删除规则

PowerShell
Remove-NetFirewallRule -DisplayName "Vite 5173 LAN"

Vite 设置

vite.config.ts

TypeScript
export default defineConfig({
  ...
  server: {
    host: '0.0.0.0',
    port: 5173,
  },
})

相关文章