如何让 npm run dev 的 vue vite 项目走 clash mixin 代理呢？

[tlerbao]

我在 Clash Mixin 中增加了如下配置，目的是让所有.test 结尾的域名指向本机

hosts:
    "*.test": 127.0.0.1

问题来了

浏览器可以正常访问 xxx.test ，但是终端工具中 npm run dev 的 vue3 vite 项目始终无法访问到 xxx.test ，export http_proxy=http://127.0.0.1:7890 ，代理终端也不行？

请问怎么解决呢？

[guanbeilang]

把环境变量写到 npm script 里面就可以了：
```
"scripts": {
"dev": "http_proxy=http://127.0.0.1:6152 vite",
"build": "vite build",
"preview": "vite preview"
},
```

[tlerbao]

[guanbeilang]

如果上面的方法还是不行的话，你可以尝试把 Clash 设置为 TUN 模式

[tlerbao]

@guanbeilang

尝试了还是不行，我 viteconfig 里是这样的防止跨域开启了代理/api 代理到 xxx.test
```
server: {
host: "0.0.0.0",
port: viteEnv.VITE_PORT,
open: viteEnv.VITE_OPEN,
cors: true,
// Load proxy configuration from .env.development
proxy: createProxy(viteEnv.VITE_PROXY)
},
```

[tlerbao]

@guanbeilang #3
经过测试，tun 模式也不行
但是，我得 vue2 项目 vuecli 创建的直接访问接口 xxx.test 的项目没问题

而这个 vue3 的项目 我怀疑就是 vite.config 里设置了 server.proxy 导致的

[guanbeilang]

@tlerbao 从报错看是没走到代理，在 DNS 解析的过程就出错了，可以试试看：
1. 使用 Clash 的 TUN 模式（没试过，不确定 DNS 解析在这个 case 下会不会一起接管）
2. 直接把 xxx.test 写到 hosts 文件里面去（最直接的解法）
3. 自建 DNS ，可以随意控制，不过搭建成本比较高，喜欢折腾可以尝试下

[guanbeilang]

4. 按你刚才#5 的思路，也可以在 vite 里面配置 hosts ，这个方式很清真，我没试过 https://cn.vitejs.dev/config/server-options.html

[tlerbao]

@guanbeilang #6
1. 本来就是每来一个新项目就修改一次/etc/hosts 来增加一条 xxx.test ，感觉麻烦，所以让 clash 接管了 hosts ,让*.test 指向本机。
2. tun 模式试了没用，vue2 项目不用代理终端，不用开 tun ，直连 xxx.test 接口的可以正常访问
3. 我就是怀疑 vue3 项目的 vite config 的 server.proxy 设置了代理导致的

[guanbeilang]

@tlerbao #8
1. 用 dnsmasq 可以支持通配符 https://blog.csdn.net/qq_44881113/article/details/120607698
2. 你确认下 Clash 是不是正确创建了路由条目，然后用 wireshark 抓包看下 Node 下请求的流量是不是走到了 Clash 新创建的这个网卡，感觉像是 DNS 解析的问题导致没走到 Clash
3. server.proxy 看上去好像是针对 http 的某个路由的转发代理，不是针对请求的代理。

我这边项目是开发、测试、生产分别加载不同的配置文件，每个文件声明不同的请求地址（所以本地开发是直接写 http://localhost:2222/这样）

[tlerbao]

@guanbeilang #9
clash 这边肯定是没问题了，浏览器，api 调试工具（配置好代理），都能正确访问 xxx.test

包括 npm run dev 启动的 vue2 vue-cli 创建的项目（没配置 server.proxy ），都能正确访问 xxx.test ，

server.proxy 这个一般是解决跨域的，跨域代理，问题应该就出在他什么上？

[sjhhjx0122]

clash x pro 的增强模式开起来应该就会默认代理走了吧

[tlerbao]

@sjhhjx0122 cfw 的 tun 模式相当于增强模式了，没用，我目前选择不用 server.proxy 了

[imzhoukunqiang]

tun 模式，软路由

[guanbeilang]

@tlerbao #10
Clash 如果配置了 TUN 模式且成功了的话，应该是在 [IP 层] 的接管，TCP 、UDP 和系统的 DNS 解析都是被接管了的。可以 `ping xxx.test` 验证一下有没有配置成功。如果这一步没成功，可能是 Clash 工具的 TUN 模式存在问题，可以试试 Surge 的 Enhance Mode 或者是其它类似工具的 Fake IP 。主要是确保 DNS 解析符合预期。

浏览器和调试工具使用的是 [HTTP 层] 的代理，DNS 的解析行为可能存在差异。
目前怀疑，应该是 vite 的 server.proxy 内的请求逻辑里面，DNS 解析没有走 HTTP 代理，而是通过系统解析来做的。

[chenjiangui998]

1. tun 模式
2. 有点曲线救国 用 proxyman 反向代理. 然后 proxy 是支持二级代理的, 二级代理指向 clash 就行

我在公司没有 root 权限就用 2