Vue3+Vite项目调用Sanity接口报url.parse is not a function如何解决

• 你使用的@sanity/client@2.x版本依赖same-origin包，该包内部调用了Node.js原生url模块的parse方法
• Vite 2.x及以上版本不会默认提供Node.js核心模块的浏览器polyfill，导致代码在浏览器环境运行时找不到url.parse方法触发报错

3.x版本已经做了现代前端环境适配，完全移除了对Node核心模块的依赖，无需额外配置即可在Vite项目中正常运行，改动成本极低：

1. 卸载旧版本客户端：pnpm remove @sanity/client
2. 安装新版本客户端：pnpm add @sanity/client@latest
3. 修改sanity-config.js代码：

// 导入方式变更
import { createClient } from '@sanity/client'

export default createClient({
  projectId: 'abCDef', // 替换为实际项目ID
  dataset: 'production',
  apiVersion: '2021-06-07',
  useCdn: true
})

你原有projects.vue的调用逻辑完全不需要修改，升级后即可正常拉取数据。

如果因业务限制暂时无法升级到3.x，可以手动给Vite配置Node模块polyfill：

1. 安装依赖：pnpm add -D @rollup/plugin-inject url process
2. 修改vite.config.js配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import inject from '@rollup/plugin-inject'

export default defineConfig({
  plugins: [
    vue(),
    // 注入全局依赖
    inject({
      url: ['url', 'default'],
      process: 'process/browser'
    })
  ],
  resolve: {
    alias: {
      // 手动指定url模块为浏览器兼容版
      url: 'url'
    }
  },
  define: {
    // 兼容老代码的global指向
    global: 'window'
  }
})

内容的提问来源于stack exchange，提问作者Blastius