本地运行Remix应用时遇URI malformed错误，求解决办法

错误详情 #

执行npm run dev后出现Vite内部服务器错误：

12:53:02 PM [vite] Internal server error: URI malformed
      at decodeURI (<anonymous>)
      at viteTransformMiddleware (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:63657:19)
      at call (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:42944:7)
      at next (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:42888:5)
      at viteServePublicMiddleware (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:53542:20)
      at call (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:42944:7)
      at next (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:42888:5)
      at viteHMRPingMiddleware (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:65046:13)
      at call (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:42944:7)
      at next (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:42888:5)
      at next (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:42866:14)
      at viteCachedTransformMiddleware (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:63642:9)
      at call (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:42944:7)
      at next (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:42888:5)
      at cors (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:43416:7)
      at file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:43452:17)
      at originCallback (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:43442:15)
      at file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:43447:13)
      at optionsCallback (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:43427:9)
      at corsMiddleware (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:43432:7)
      at call (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:42944:7)
      at next (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:42888:5)
      at Function.handle (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:42891:3)
      at Server.app (file:///C:/Users/anted/Documents/GitHub/remix-strapi-contacts-app/remix-contacts-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:42756:37)
      at Server.emit (node:events:513:28)
      at parserOnIncoming (node:_http_server:1072:12)
      at HTTPParser.parserOnHeadersComplete (node:_http_common:119:17)

由于Remix项目没有public/index.html，可以从以下几个方向排查解决：

• 检查Remix根组件的资源引用：打开app/root.tsx，查找是否存在%PUBLIC_URL%这类React项目的占位符，或者资源引用路径是否包含非法URI字符。Remix中引用静态资源应使用~/前缀（比如~/images/logo.png），替换掉不符合规范的路径写法。

• 排查public目录下的资源：检查public文件夹内的所有文件，确保文件名和子目录名不含空格、中文、特殊符号（如#、%）等非法URI字符，同时确认资源的引用路径是否正确。

• 修正Vite配置的base路径：打开vite.config.ts，查看base配置项，如果设置了%PUBLIC_URL%或其他不符合URI规范的值，将其改为合法路径，比如根路径'/'或项目部署的实际路径。

• 清理缓存与重装依赖：

  1. 删除node_modules文件夹和package-lock.json文件
  2. 执行npm install重新安装依赖
  3. 用npm run dev -- --force启动服务，强制清除Vite缓存

• 检查路由与数据处理逻辑：排查项目中自定义的路由、loader或action函数，确认是否存在手动调用decodeURI时传入非法字符串的情况，或者URL处理逻辑中是否有错误的编码/解码操作。

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