기존 React 프로젝트에서 Vite 사용
2376 단어 programmingjavascriptreactvite
또한 Vite가 무엇인지 궁금하고 아마도 그것을 사용하고 싶다면 '에 대한 나의 마지막 튜토리얼을 확인할 수 있습니다.
더 할 것 없이...
확인해야 할 사항.
그 다음에
다음과 같이 터미널에서 필요한 패키지를 설정하십시오.
$ yarn add vite @vitejs/plugin-react-refresh
루트 폴더에
vite.config.js 파일을 만들고 다음 코드를 추가합니다.// vite.config.js
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
export default defineConfig({
plugins: [reactRefresh()]
})
이
config 파일은 서버가 실행 중일 때 종속성을 미리 번들로 묶습니다.루트 폴더에서도
package.json . 이는 초기react-create start에서 응용 프로그램을 시작, 빌드 및 미리 보기 위한 번들러를 정의합니다.// package.json
"scripts": {
"start": "vite",
"build": "vite build",
"test": "vite test",
"eject": "vite eject"
},
여전히 루트 폴더에서
/public 폴더를 열고 index.html 파일을 상위 폴더로 이동합니다.파일에서
%PUBLIC_URL% 및 <link.../> 태그에 연결된 <script> 태그를 모두 제거하고 so /src/index.js/ 와 같은 적절한 디렉토리에 대한 참조를 제거하십시오.<!-- Before edit -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- After edit -->
...
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<body>
...
<div id="root"></div>
<script type="module" src="/src/index.js"></script>
</body>
드디어
이제 실행할 수 있습니다
$ yarn start
행복한 초대 코딩.
Reference
이 문제에 관하여(기존 React 프로젝트에서 Vite 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/asapconet/using-vite-on-an-existing-react-project-208p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
