过滤器不适合处理路径差异，因其无法感知平台、环境变量或构建配置，路径适配应在请求层、配置层或条件编译中解决，而非依赖过滤器做运行时拼接。
过滤器不适合处理路径差异
直接用 filters 处理不同平台的 API 路径或静态资源路径，是典型误用。过滤器只接收模板中传入的值做纯转换，无法感知运行时平台、环境变量或构建时配置，更没法做条件分支或网络请求逻辑。你写一个 formatPath 过滤器，传入 "api/user"，它根本不知道当前是 H5 还是微信小程序，也无法读取 process.env.NODE_ENV 或 uni.getSystemInfoSync().platform。
路径差异必须在请求层或配置层解决
真正该介入的位置是：封装好的请求函数（如 utils/request.js）、main.js 初始化阶段、或构建工具配置。常见错误是把路径拼接逻辑塞进 v-for 里的 {{ item.url | pathFilter }} —— 这会导致：H5 请求发到 https://dev.api.com，而小程序却去连 http://192.168.1.100:8080，直接 404 或跨域拦截。
- API 基地址应由构建时注入（Vite 的
import.meta.env.VUE_APP_API_BASE）或运行时根据uni.getSystemInfoSync().platform动态判断（仅限简单场景） - 静态资源路径（如图片、字体）若需多端适配，优先走
static/目录 + 条件编译，而不是靠过滤器“算出来” - 绝对路径（
https://开头）可跨端复用；相对路径（/api/）在 H5 受同源策略限制，在小程序需配置 request 合法域名，在 App 则无限制
条件编译才是路径适配的正确姿势
想让 H5 走代理、小程序走配置域名、App 直连内网 IP？别写过滤器，用 #ifdef 注释块控制实际请求代码。例如在 request.js 中：
const baseURL = (() => {
// #ifdef H5
return '/api' // 开发服务器代理前缀
// #endif
// #ifdef MP-WEIXIN
return 'https://api.weixin.qq.com'
// #endif
// #ifdef APP-PLUS
return 'http://192.168.1.100:8080'
// #endif
})()
这种写法在编译时就被剥离，最终每个平台只保留对应的一行，零运行时开销，且 IDE 和 TypeScript 都能正确推导类型。
容易被忽略的坑：H5 的代理配置不等于路径过滤器
很多开发者以为在过滤器里把 "user/list" 拼成 "http://localhost:8080/api/user/list" 就完事了，但 H5 环境下这个 URL 仍会触发浏览器跨域拦截——除非后端已配 CORS，或你真正在 vite.config.ts 里写了代理规则：server.proxy['/api'] = { target: 'http://192.168.1.100:8080', changeOrigin: true }。过滤器改不了浏览器安全策略，它只是字符串操作。
