关于使用create-react-app创建的项目打包后文件路径为绝对路径的,导致页面空白的问题

原创 野人  2021-10-27 19:35  阅读 122 次

如果你也也有用React开发项目的话,想必都会使用create-react-app这个脚手架来搭建项目的基本框架吧。

然后,用create-react-app搭建完后,运行打包命令后,生成的index.html打包文件里面加载路径都是绝对路径,就像下面这样的;

那么这样带来的问题,就是无法直接打开,显示空白,因为采用了绝对路径,而解决方法就是把绝对的改成相对的路径,即可,所以,你需要把生成的index.html里面的含有/static开头的,全部换成./static(加了点),这样当下就可以立马解决问题了。

但是,每次打包完都需要重复一样的动作,这是很浪费时间,又很头疼的问题,所以这就要更改打包配置文件了,具体更改方法如下:

法一:

找到自己项目里面的package.json文件,加上"homepage":".",这样打包后就会在所有的路径前面加上个.了。

法二:我自己在用的,比较推荐

因为使用create-react-app创建的项目默认是不会把配置文件暴露出来的,所以这里就不讲把配置文件暴露出来而直接修改的方法,而是用的craco这款插件,重写了配置文件,从而达到修改的目的,具体方法如下:

找到craco.config.js配置文件,添加如下信息:

module.exports = {
    webpack: {
        //以相对路径打包https://github.com/gsoft-inc/craco/issues/132
        configure: (webpackConfig, { env, paths }) => {
            webpackConfig.output = {
                ...webpackConfig.output,
                publicPath: '.',
            };
            return webpackConfig;
        },
    },
}

两种方法都可以达到效果,没有说哪一种更好,只要能解决问题,才是最重要的。

这段时间只要有用create-react-app创建的项目都是用craco来实现修改配置文件,只要有遇到相关的问题,我都会一一记录下来,所以也写了几篇文章,大家有遇到类似的问题,可以看看。

相关文章:

使用create-react-app创建的项目借助craco来配置路径别名的教程

使用create-react-app创建的项目引入了Ant Design里面的组件怎么实现按需加载?

使用create-react-app创建的项目,怎么设置才能支持less文件?

使用Create React App脚手架快速创建TypeScript+React+Ant Design开发环境

本文地址:https://www.yerenwz.com/4949.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论