패키지에 "홈 페이지"를 사용합니다.json, localhost 패스를 망치지 않고

패키지에 "홈 페이지"를 사용합니다.json, localhost 패스를 망치지 않고

이 질문은 사실 이전 질문에 대한 제 답변에서 직접 나온 것입니다.

추가했습니다."homepage"나의 것package.json왜냐하면 제가 Github Pages에서 진행했던 React 앱이기 때문입니다.의 출력npm run build라고 말하다/build디렉토리는 이제 도입할 수 있으며, 이 디렉토리는 프로젝트가 호스트되고 있는 것을 전제로 하고 있습니다./project_name/.

그러나 로컬 호스트에서는 프로젝트가 다음 위치에서 호스팅되지 않습니다./project_name/따라서 js 및 css에 대해 요청된 경로가 엉망입니다(검색 중)./project_name/static/...대신/static/...앱이 고장났습니다.

어떻게 홈페이지 필드를 패키지에 넣을 수 있습니까?Json을 사용하면 Github Pages(예를 들어)에 전개하면서 로컬에서 동작하는 어플리케이션으로 개발할 수 있습니까?

문서:create-react-app그럼 다른 상대 경로에서 동일한 빌드를 제공하는 방법에 대해 설명합니다.

홈페이지라고 하면

"homepage": ".",

자산은 상대적으로 공급될 것이다index.html그러면 앱을 에서 이동할 수 있습니다.http://mywebsite.example로.http://mywebsite.example/relativepath또는 심지어http://mywebsite.example/relative/path다시 지을 필요 없이 말이죠.

개발 목적으로, 서비스 제공yarn start또는npm start충분합니다.앱을 localhost에서 사용할 수 있습니다.

사용할 수 있습니다.PUBLIC_URL특정 빌드에 대해 홈 페이지를 재정의하는 환경 변수입니다.패키지에 넣어두는 것이 더 좋습니다.예를 들어 다음과 같습니다.

{
  // ...
  "scripts": {
    "build": "react-scripts build",
    "build-localhost": "PUBLIC_URL=/ react-scripts build"
    // ...
  }
  // ...
}

리액트 라우터돔도 포함하는 올인원 답변의 경우:

1. 더하다package.json['homepage']운영 URL이 됩니다.주의: CRA 빌드스텝에서는 URL의 도메인 부분이 삭제되어 인덱스에 대한 경로만 남습니다.

2. localhost를 빌드할 때PUBLIC_URL=/ npm run build

3. 더하다<base href="%PUBLIC_URL%" />당신의 안에서public/index.html이 문서에서 제안하는 페이지. 자산(img, CSS)을 지원하여%PUBLIC_URL%나중에 재사용할 수 있습니다.

4. BrowserRouter(일반적으로 App.js 또는 main.js)를 작성하는 컴포넌트에서 다음을 추가합니다.

   const basename = document.querySelector('base')?.getAttribute('href') ?? '/'    
   

5. 사용처:<BrowserRouter basename={basename} />

개발 셸 환경을 사용하여 홈페이지 설정을 덮어쓸 수 있습니다.

$ export PUBLIC_URL=http://localhost:3000/ 
$ yarn start 

또는 필요에 따라 홈페이지 설정을 삭제하고 env를 설정한 후 실가동용으로 구축해 주십시오.

$ export PUBLIC_URL=http://example.com/subdir 
$ yarn build

패키지에 '홈페이지'를 추가하면 이미지가 뜨지 않는 비슷한 상황이 있었습니다.gh-pages에 전개했습니다.여러 가지 솔루션을 시도해 본 후 이미지를 공용 폴더에서 꺼내 src 폴더로 가져가는 것으로 이 문제를 해결했습니다.그 후 전환했습니다.

<img src="/img/image.JPG" alt="image" />

로.

<img src={require('../../assets/image.JPG')} alt="image" /> 

이게 나한테 효과가 있는 것 같았어!

언급URL : https://stackoverflow.com/questions/43011207/using-homepage-in-package-json-without-messing-up-paths-for-localhost