Vite执行npm run serve后浏览器报Cannot GET /

在使用 Vite 时,想像以前执行 npm run serve 一样,查看生产环境的应用。

在执行后并未发现异常,但在浏览器访问时,显示 Cannot GET /,说是找不到根目录

在网上查找解决方案,发现并没有结果。可能是还没有人踩到这个坑。

查看了 package.json 文件中的 scripts,运行 npm run serve 执行的是 vite preview.

"scripts": {
  "dev": "vite",
  "build": "vue-tsc --noEmit && vite build",
  "serve": "vite preview"
}

最后通过官方文档发现,vite preview 实际上只是帮我们开启了一个静态 Web 服务器,并没有构建项目。需要先运行 npm run build 后,再运行 npm run serve 可以正常访问啦!


---------------------
作者:勇敢的阿呆
来源:优快云
原文:https://blog.youkuaiyun.com/qq_41664096/article/details/121312823
版权声明:本文为作者原创文章,转载请附上博文链接!
内容解析By:优快云,CNBLOG博客文章一键转载插件

Vite 是一个现代化的前端构建工具,它利用浏览器原生的 ES 模块导入功能来实现快速的开发服务器启动和热更新。然而,在执行 `npm run build` 命令进行项目打包时,如果遇到错误提示 `has not been built from source file`,这通常意味着 Vite 在尝试处理某个文件时无法找到对应的源文件。 ### 可能的原因及解决办法 #### 1. 文件路径问题 最常见的原因是文件路径配置不正确或文件被误删、移动。确保所有引用的文件都存在于正确的目录中,并且路径拼写无误。在 Vite 配置文件(如 `vite.config.js`)中检查别名(alias)、插件或其他与路径相关的设置是否准确指向了源文件的位置[^4]。 #### 2. 插件配置不当 如果你使用了额外的插件(例如用于支持 Vue 或 React 的插件),请确认这些插件是否已经正确安装并配置。某些情况下,插件可能试图访问未正确解析的模块或组件,导致此类错误发生。参考官方文档或社区资源以获取最新的插件配置指南。 #### 3. 缓存问题 有时候旧的缓存数据可能导致构建过程出现问题。可以尝试清除 Vite 的缓存目录(默认位于 `.vite` 或者项目的根目录下的特定位置),然后重新运行构建命令。删除相关缓存后再次执行 `npm run build` 看看问题是否得到解决。 #### 4. 版本兼容性问题 检查你的 Vite 版本以及所依赖的其他库版本之间是否存在已知的问题或不兼容的情况。有时升级到最新版或者降级至稳定版本能够修复一些潜在的问题。查看 GitHub 上的 issue 页面或者其他开发者论坛可能会有类似问题的讨论。 #### 5. 自定义脚本或配置错误 根据提供的 `package.json` 中的脚本信息来看,可能存在自定义的构建逻辑(比如通过 `scripts/build.js`)。检查这些自定义脚本是否有异常行为,特别是那些涉及文件操作的部分。此外,还要审查任何可能影响构建流程的环境变量设定。 #### 示例:清理缓存并重建 ```bash # 清除node_modules和lock文件 rm -rf node_modules package-lock.json # 如果使用了yarn,则清除yarn缓存 yarn cache clean # 重新安装依赖 npm install # 或 yarn install # 尝试移除vite缓存 rm -rf .vite/ # 再次运行构建命令 npm run build ``` 以上步骤可以帮助诊断并解决大部分由配置错误引起的构建失败问题。如果上述方法均无效,请提供更多关于项目结构、使用的具体技术栈及相关配置细节以便进一步分析原因。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值