前言
事情的起因是这样的,在一次用create-react-app
构建的项目中,我在项目中同时设置了homepage
与PUBLIC_URL
的,导致了一系列的异常。
场景再现
当时项目需要配置到一个子目录/visual-drag-demo
下,所以,我对是homepage做了如下操作,再package.json
配置如下:
"homepage": "/visual-drag-demo",
打包构建运行后,打开控制台查看路径,发现编译后访问目录是不对的。
<script src="/static/js/main.e8bd816f.chunk.js"></script>
经过排查,发现在package.json
中,我又在之前做了如下配置:
"start": "PUBLIC_URL=/ react-app-rewired start",
进行分析,原来是设置了PUBLIC_URL=/
后,PUBLIC_URL
的优先级比homepage
高。导致编译路径为/
。才会有如此错误。
再问一步why
当在package.json
中,同时设置了homepage
与PUBLIC_URL
为何会用如此的影响了。不信邪的我去了create-react-app中寻找到了答案。再getPublicUrlOrPath.js中,我看到了这份逻辑运行。代码如下:
/**
* Returns a URL or a path with slash at the end
* In production can be URL, abolute path, relative path
* In development always will be an absolute path
* In development can use `path` module functions for operations
*
* @param {boolean} isEnvDevelopment
* @param {(string|undefined)} homepage a valid url or pathname
* @param {(string|undefined)} envPublicUrl a valid url or pathname
* @returns {string}
*/
function getPublicUrlOrPath(isEnvDevelopment, homepage, envPublicUrl) {
const stubDomain = 'https://create-react-app.dev';
if (envPublicUrl) {
// ensure last slash exists
envPublicUrl = envPublicUrl.endsWith('/')
? envPublicUrl
: envPublicUrl + '/';
// validate if `envPublicUrl` is a URL or path like
// `stubDomain` is ignored if `envPublicUrl` contains a domain
const validPublicUrl = new URL(envPublicUrl, stubDomain);
return isEnvDevelopment
? envPublicUrl.startsWith('.')
? '/'
: validPublicUrl.pathname
: // Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
envPublicUrl;
}
if (homepage) {
// strip last slash if exists
homepage = homepage.endsWith('/') ? homepage : homepage + '/';
// validate if `homepage` is a URL or path like and use just pathname
const validHomepagePathname = new URL(homepage, stubDomain).pathname;
return isEnvDevelopment
? homepage.startsWith('.')
? '/'
: validHomepagePathname
: // Some apps do not use client-side routing with pushState.
// For these, "homepage" can be set to "." to enable relative asset paths.
homepage.startsWith('.')
? homepage
: validHomepagePathname;
}
return '/';
}
在以上代码中,你将会找到问题的所有答案。