1
私はリアクションのビルドツールでリアクションアプリを構築しようとしています。React BuilderツールでパブリックURLが正しく設定されない
npm run build
ビルドフォルダでindex.htmlファイルを開くと、空白のページ以外は表示されません。これは、反応ビルダーがスクリプトとCSSのパスを間違って設定するためです。
index.htmlを
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<style>
</style>
<link href="/static/css/main.5fa823c3.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.09bdcb2b.js"></script>
</body>
</html>
あなたが見ることができるように、スラッシュはすべてのファイルパスの前にあります。これを手作業で修正すると、スクリプトは機能しますが、process.env.PUBLIC_URLの値がnullであるため、ブラウザは "service-worker.js"ファイルを見つけることができません。 （サービスworker.jsが正しい場所に存在する）
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
window.addEventListener('load',() => {
console.log("URL: "+process.env.PUBLIC_URL) //THIS IS NULL
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound =() => {
const installingWorker = registration.installing;
installingWorker.onstatechange =() => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.');
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
});
}
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
基本的に、それは公共のURLを設定することはできません。
どうすればこの問題を解決できますか？どこでもこの問題に関する情報はほとんどありません。
どのビルドツールを参照していますか？ CreateReactAppのスクリプトを意味しますか？そうでない場合は、比較するものが必要な場合は、そこからボックスを外してbuildを実行します。 – sinewave440hz