vite修仙传12-故障排除

故障排除

你还可以查看 Rollup 的故障排除指南 了解更多。

如果这里的建议并未帮助到你,请将你的问题发送到 GitHub 讨论区Vite Land Discord#help 频道。

CLI

Error: Cannot find module 'C:\foo\bar&baz\vite\bin\vite.js'

你的项目文件夹路径中可能包含了符号 &,这在 Windows 上无法与 npm 配合正常工作 (npm/cmd-shim#45)。

你可以选择以下两种修改方式:

  • 切换另一种包管理工具(例如 pnpmyarn
  • 从你的项目路径中移除符号 &

开发服务器

请求始终停滞

如果你使用的是 Linux,文件描述符限制和 inotify 限制可能会导致这个问题。由于 Vite 不会打包大多数文件,浏览器可能会请求许多文件,而相应地需要许多文件描述符,因此超过了限制。

要解决这个问题:

  • 使用 ulimit 增加文件描述符的限制

    shell

    # 查看当前限制值
    $ ulimit -Sn
    # (暂时)更改限制值
    $ ulimit -Sn 10000 # 你可能也需要更改硬性限制值
    # 重启你的浏览器
    
    
  • 通过 sysctl 提升下列 inotify 相关的限制

    shell

    # 查看当前限制值
    $ sysctl fs.inotify
    # (暂时)更改限制值
    $ sudo sysctl fs.inotify.max_queued_events=16384
    $ sudo sysctl fs.inotify.max_user_instances=8192
    $ sudo sysctl fs.inotify.max_user_watches=524288
    
    

如果通过以上步骤仍不起作用,可以尝试在以下文件中添加 DefaultLimitNOFILE=65536 配置。

  • /etc/systemd/system.conf
  • /etc/systemd/user.conf

对于 Ubuntu Linux 操作系统,你可能需要添加一行 * - nofile 65536 到文件 /etc/security/limits.conf 之中,而不是更新 systemd 配置文件。

请注意,这些配置会持久作用,但需要 重新启动

网络请求停止加载

使用自签名SSL证书时,Chrome 会忽略所有缓存指令并重新加载内容。而 Vite 依赖于这些缓存指令。

要解决此问题,请使用受信任的SSL证书。

请查看:缓存问题 和相关的 Chrome issue

macOS

您可以使用以下命令通过 CLI 安装受信任的证书:

security add-trusted-cert -d -r trustRoot -k ~/Library/Keychains/login.keychain-db your-cert.cer

或者,通过将其导入 Keychain Access 应用程序并将您的证书的信任更新为“始终信任”。

431 Request Header Fields Too Large

当服务器或 WebSocket 服务收到一个较大的 HTTP 头,该请求可能会被遗落并且会显示下面这样的警告。

Server responded with status code 431. See https://vitejs.dev/guide/troubleshooting.html#_431-request-header-fields-too-large.

这是由于 Node.js 限制请求头大小,以减轻 CVE-2018-12121 的影响。

要避免这个问题,请尝试减小请求头大小。举个例子,如果 cookie 太长,请删除它。或者你可以使用 --max-http-header-size 来更改最大请求头大小。

HMR

Vite 检测到文件变化,但 HMR 不工作

你可能导入了一个拥有不同大小写的文件,例如,存在 src/foo.js 文件而 src/bar.js 导入了它:

js

import './Foo.js' // 应该为 './foo.js'

相关 issue:#964

Vite 没有检测到文件变化

如果你正在 WSL2 中运行 Vite,Vite 无法在某些场景下监听文件变化。请查看 server.watch 选项 的描述。

完全重新加载了,而不是 HMR

如果 HMR 不是由 Vite 或一个插件处理的,那么将进行完全的重新加载。

同时如果有依赖环,也会发生完全重载。要解决这个问题,请先尝试解决依赖循环。

控制台中大量热更新

这可能是由循环依赖引起的。要解决这个问题,请先尝试解决依赖循环。

构建

构建产物因为 CORS 错误无法工作

如果导出的 HTML 文件是通过 file 协议打开的,那么其中的 script 将不会运行,且报告下列错误。

Access to script at 'file:///foo/bar.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///foo/bar.js. (Reason: CORS request not http).

请查看 释因:CORS 请求不是 HTTP 请求 - HTTP | MDN 了解为什么会发生这种情况的更多信息。

你需要通过 http 协议访问该文件。最简单的办法就是使用 npx vite preview

其他

Module externalized for browser compatibility

当你在浏览器中使用一个 Node.js 模块时,Vite 会输出以下警告:

Module "fs" has been externalized for browser compatibility. Cannot access "fs.readFile" in client code.

这是因为 Vite 不会自动 polyfill Node.js 的内建模块。

我们推荐你不要在浏览器中使用 Node.js 模块以减小包体积,尽管你可以为其手动添加 polyfill。如果该模块是被某个第三方库(这里意为某个在浏览器中使用的库)导入的,则建议向对应库提交一个 issue。

出现 Syntax Error 或 Type Error

Vite 无法处理、也不支持仅可在非严格模式(sloppy mode)下运行的代码。这是因为 Vite 使用了 ESM 并且始终在 ESM 中使用 严格模式

例如,你可能会看到以下错误。

[ERROR] With statements cannot be used with the "esm" output format due to strict mode

TypeError: Cannot create property 'foo' on boolean 'false'

如果这些代码是在依赖中被使用的,你应该使用 patch-package(或者 yarn patchpnpm patch 工具)来做短期补丁处理。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,258评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,335评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,225评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,126评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,140评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,098评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,018评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,857评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,298评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,518评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,400评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,993评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,638评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,661评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352

推荐阅读更多精彩内容