解决create-react-app打包后, 本地打开页面空白的问题

解决create-react-app打包后, 本地打开页面空白的问题

我们用create-react-app创建了一个项目后, 打包后本地打开页面空白, 查看控制台, 发现css和js引入的路径不对
解决create-react-app打包后, 本地打开页面空白的问题_第1张图片
我们查看打包后的html页面
解决create-react-app打包后, 本地打开页面空白的问题_第2张图片
这里用的全是绝对路径, 如果是服务器环境下访问没有问题, 但是本地打开就会找不到资源目录

解决方法

只需要打包时候, 将绝对路径替换为相对路径即可:

package.json中添加一行:

"homepage":"."

变成这样:
解决create-react-app打包后, 本地打开页面空白的问题_第3张图片
homepage作用就是打包时候, 自动在资源目录, 也就是引入的js和css目录前面添加设置的字符串,

设置为 "."会自动在前面添加一个., 这样绝对路径就变为相对路径了,

再次打包, 查看打包后的html:
解决create-react-app打包后, 本地打开页面空白的问题_第4张图片
路径全部变为了相对路径, 直接打开页面 , 就可以看到内容了

你可能感兴趣的:(react,bug解决)