yarn build命令打包后,打开网页显示为空白的问题

最新推荐文章于 2024-06-18 13:32:42 发布
最新推荐文章于 2024-06-18 13:32:42 发布
阅读量3.6k 收藏 4
点赞数 1
文章标签： yarn
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjw0021/article/details/112759005
版权

问题：运行yarn build之后打开index.html网页显示空白，控制台显示如图：

解决：在package.json文件中添加"homepage": "./"

土匪丁的窝子
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react打包后html打开一片空白,02-react随记-在yarn build打包后,打开网页显示为空白的解决方案...
weixin_42521032的博客
07-02 1337
react在yarn build打包后,打开网页显示为空白的解决方案创建react项目create-react-app my-appcd my-appnpm start构建完这个初始的项目之后,发现项目是可以正常访问的!接着就是发布上线yarn build控制台中显示The project was built assuming it is hosted at /.You can control t...
Vue项目yarn build 打包后页面白屏解决方案
m0_64547949的博客
11-23 681
使用yarn build 打包后 打开页面白屏解决方案
yarn.build:构建并捆绑您的本地软件包。 类似于Bazel和Buck，但适用于Yarn v2:partying_face:
05-14
纱线 yarn.BUILD是Yarn 2的插件。它使用依赖图来构建所需的内容。 您可以使用几个后端程序包，一个服务器程序包（也许是graphQL模式程序包）和一个前端程序包来设置一个monorepo。 并按照需要的顺序进行构建。 然后，仅在发生变化时进行重建。 请参阅的完整文档 安装： yarn plugin import https://yarn.build/latest 指令 build ：构建您的包和所有依赖项 bundle ：捆绑软件包及其本地依赖项，这些软件包是为容器和AWS lambda设计的。 test ：测试您的程序包及其依赖项 设定档 这不是必须的，但是，要改变任何默认设置或启用测试版功能的添加以下.yarnbuildrc.yml在纱线工作区的根（旁边yarn.lock ）。 folders : # input defaults to the whole p
前端打包工具之npm、yarn、pnpm对比
最新发布
DZQ1223的博客
06-18 1009
NPM（Node Package Manager），作为默认的JavaScript应用包管理器，与Node.js一同安装，它是目前使用最广泛的包管理器，得益于其对大量包的强大支持。Yarn 是一个 JavaScript 的包管理器，它是由 Facebook、Google、Tilde 以及其他社区成员共同维护的开源项目。Yarn 在 NPM 的基础上进行了改进和增强，旨在提高依赖包的安装速度和可靠性。pnpm，即performant npm，高性能的npm。
react 执行 yarn build 页面无法显示
weixin_34040079的博客
03-17 1880
资源文件路径问题 　　如果你使用create-react-app创建项目，执行命令 yarn build 后，直接以静态方式打开build文件夹内的index.html,会看到页面显示出现问题，打开console后会看到js、css、svg等文件的路径出现问题。 项目结构：（build文件夹） 解决方案： 　　打包之前在package.json中，添加了 "homepage": "."...
vue npm run build打包之后项目打开一片空白,解决办法
我的个人博客
09-03 1万+
vue项目使用npm run build打包之后,项目打开一片空白,如下图: 这是因为在打包的时候,没有修改路径,build默认打包路径是根路径,所以需要在修改的文件路径如下 1.config文件下的index.js,下图是默认设置 修改后的结果: 2.build文件下的utils.js文件下的 3.build文件下的webpack.prod.conf.js文...
Yarn 构建工具入门基础
weixin_34291004的博客
09-14 159
一、yarn的背景和介绍一直以来，我们在安装和管理依赖的时候基本上都会使用npm，npm是一个非常优秀全面且广受欢迎的包管理工具，它奠定了前端模块化开发的基石，为前端的发展做出了不可磨灭的贡献。 yarn就是一个类似于npm的包管理工具，它是由facebook推出并开源。鉴于facebook在前端界的影响力，yarn一面世就很受瞩目，受到...
yarn 前端打包工具指定配置文件
08-10
默认情况下，`Yarn` 使用 `package.json` 文件中的 `scripts` 字段来执行命令，如 `build` 或 `start`，这些命令通常与前端打包工具（如 `Webpack`、`Rollup` 或 `Parcel`）相关联。 当我们需要对打包过程进行定制...
vscode-yarn：VSCode扩展，用于管理纱线命令
02-03
VSCode-Yarn：VSCode扩展，用于管理纱线命令。 入门 您可以通过安装此很棒的扩展。 安装 启动快速打开 Ctrl+P ⌘P Ctrl+P 粘贴以下命令，然后按Enter ： ext install gamunu.vscode-yarn 打包的VSIX扩展 从...
yarn命令的使用.html
09-07
yarn命令的使用
yarn-plugins:适用于Yarn 2的Yarn插件
05-02
纱线插件 纱线2的纱线插件。 外挂程式 列出并在更改的工作空间及其依存者上运行命令。... build-为工作区构建Docker映像。 -更新references在tsconfig.json添加/删除工作区时。 执照 麻省理工学院
解决yarn serve 运行成功后，显示Network: unavailable的问题
qq_43483403的博客
07-30 1367
-yarn serve Network: unavailable
yarn启动项目的命令
m0_69057918的博客
11-22 2802
yarn启动项目的常用命令
yarn、yarn run build报错修复汇总
nxm2012的博客
06-26 2589
yarn、yarn run build报错修复汇总
yarn的部署
weixin_30912051的博客
02-19 178
Yarn: 资源和作业调度 是需要部署的 MapReduce on Yarn http://hadoop.apache.org/docs/stable/hadoop-project-dist/hadoop-common/SingleCluster.html查看以下内容的官网 Configure parameters as follows:etc/hadoop/mapred-site.xml:...
Yarn的安装及使用教程
weixin_39108752的博客
01-22 5902
Yarn是由Facebook、Google、Exponent和Tilde共同开发的一个新的JavaScript包管理器，旨在解决客户端JavaScript项目中的一些关键问题，如性能、安全性和可靠性。Yarn在发布后迅速获得了开发社区的广泛认可，成为许多现代JavaScript项目的首选包管理工具。与NPM相比，Yarn提供了更快的依赖安装速度、更严格的版本控制和更高效的依赖管理。Yarn的出现不仅提高了项目的构建效率，还通过其独特的锁定文件机制，确保了项目依赖的一致性。
yarn build 执行流程图
weixin_56037622的博客
06-23 3895
自动化构建
weixin_38255079的博客
02-08 276
源代码自动化构建成生产代码，也称为自动化构建工作流。 使用提高效率的语法、规范和标准，如：ECMAScript Next、Sass、模板引擎，这些用法大都不被浏览器直接支持，自动化工具就是解决这些问题的，构建转换那些不被支持的特性。 NPM Scripts 在package.json中增加一个scripts对象，如： { "scripts": { "build": "sass scss/main.scss css/style.css" } } scripts可以自动发现node_modul
yarn build 和 npm run build打包的区别
热门推荐
轻风细雨_林木木
03-21 3万+
yarn build 和 npm run build打包有什么区别 结论： 没区别，yarn build === yarn run build === npm run build
vite打包后直接打开html 空白
11-27
当使用 Vite 进行打包后，如果直接打开生成的 HTML 文件后出现空白页面，可能是由于以下几个原因： 1. 配置问题：检查 Vite 的配置文件（通常是 vite.config.js），确认是否正确配置了入口文件和输出路径。确保入口文件正确指向要打包的主要 JavaScript 文件，并且输出路径正确设置。 2. 缺少依赖：检查项目的依赖项是否完整，并且已经正确安装。使用 npm 或者 yarn 等包管理工具，检查 package.json 中的依赖项，并且运行相应的安装命令确保所有依赖都已成功安装。 3. 引入错误：检查 main.js（或其他主要 JavaScript 文件）中是否正确引入了其他模块或库。确保引入路径或包名拼写无误，并且文件位置正确。 4. 配置缓存：有时候在修改 Vite 配置文件后，缓存可能会导致构建过程出错。可以尝试清除缓存再重新执行打包命令。可以通过删除临时构建文件或清除 Vite 缓存的方式来解决这个问题。 如果以上方法都无法解决问题，可以尝试在终端中运行打包命令，观察是否有报错信息输出，从而更进一步找到问题所在。此外，还可以参考 Vite 的官方文档、社区论坛或者issue页面寻求帮助，解决打包后空白页面的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值