Vite Ionic 프로젝트에서 작동하도록 라이브 리로드하기

매우 빠르기 때문에 내 ViteJS 프로젝트에서 Ionic Framework을 사용하는 것을 좋아합니다. 일부 상황에서는 일반적으로 Ionic FrameworkCapacitor Live Reload 프로젝트에서 얻는 Capacitor 기능을 사용해야 합니다. 이것은 물리적 장치에서 작업할 때 개발자 경험에 도움이 됩니다.

정상적인 ionic cli 명령을 시도하는 것은 작동하지 않지만 아래에 귀하에게 적합한 접근 방식을 설명했습니다.

I don't use Capacitor Live Reload that often, but this is a manual approach to get it going with the Vite in ReactJS or VueJS project. I provide sample projects linked below

먼저 서버를 시작하십시오

aaronksaunders@Aarons-14MacBookProM1Pro my-react-app % npm run dev

> [email protected] dev
> vite


  VITE v3.0.6  ready in 359 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
12:57:47 AM [vite] hmr update /src/App.tsx

그런 다음 위 명령에서 서버가 실행 중인 주소를 사용하여 수정capacitor.config.ts

const config: CapacitorConfig = {
  appId: 'my.react.app',
  appName: 'my-react-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server : {
    "url" : "http://127.0.0.1:5173/"  //<= use address the server is running on locally
  }
};

마지막으로 기기에 앱을 배포합니다.

aaronksaunders@Aarons-14MacBookProM1Pro my-react-app % npx cap run ios --external  --target=73CE91C9-4855-496B-9481-CA486652E9D7
✔ Copying web assets from dist to ios/App/App/public in 12.83ms
✔ Creating capacitor.config.json in ios/App/App in 1.35ms
✔ copy ios in 25.05ms
✔ Updating iOS plugins in 1.96ms
[info] Found 4 Capacitor plugins for ios:
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
✔ Updating iOS native dependencies with pod install in 2.53s
✔ update ios in 2.56s
✔ Running xcodebuild in 3.20s
✔ Deploying App.app to 73CE91C9-4855-496B-9481-CA486652E9D7 in 1.51s
aaronksaunders@Aarons-14MacBookProM1Pro my-react-app % 

이제 모바일 앱이 실행 중인 로컬 서버를 가리키고 있으며 기본적으로 실시간 다시 로드가 작동합니다. 다른 접근 방식이 있다고 확신하지만 앞서 말했듯이 자주 사용하지는 않습니다. 바라건대, 이것은 당신을 움직이게합니다

기억하다
프로덕션에 배포하기 전에 capacitor.config.ts에 대한 편집을 제거하십시오. 그렇지 않으면 앱이 앱을 실행할 로컬 서버를 찾습니다!!

다음은 일부 이온 커패시터 Vite 템플릿입니다.

이 템플릿은 IOS 및 Android에서 테스트되었으며 이 게시물 날짜를 기준으로 최신 버전의 Ionic에서 작동합니다.

REACTJS

아론크사운더스 / 이온-커패시터-반응-vite-앱

이온-커패시터-반응-vite-앱

이 템플릿은 Vite를 사용하여 React Ionic 및 Capacitor로 개발을 시작하는 데 도움이 됩니다.
2022년 8월 11일 업데이트됨

Vite Ionic 프로젝트에서 작동하도록 라이브 리로드하기

나는 Live reload를 자주 사용하지 않지만 Vite 프로젝트를 진행하기 위한 수동 접근 방식입니다.
먼저 서버를 시작하십시오

aaronksaunders@Aarons-14MacBookProM1Pro my-react-app % npm run dev

> [email protected] dev
> vite


  VITE v3.0.6  ready in 359 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
12:57:47 AM [vite] hmr update /src/App.tsx

그런 다음 위 명령에서 서버가 실행 중인 주소를 사용하여 수정capacitor.config.ts

const config: CapacitorConfig = {
  appId: 'my.react.app',
  appName: 'my-react-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server : {
    "url" : "http://127.0.0.1:5173/"  //<= use address the server is running on locally
  }
};

마지막으로 기기에 앱을 배포합니다.

aaronksaunders@Aarons-14MacBookProM1Pro my-react-app % npx cap run ios --external  --target=73CE91C9-4855-496B-9481-CA486652E9D7
✔ Copying web

…

View on GitHub

VUEJS

아론크사운더스 / ionicv6-베타-vue-vite-프로젝트

Vue 3 + Typescript + Vite + Ionic 프레임워크 v6

이 템플릿은 Vite에서 Vue 3 및 Typescript로 개발을 시작하는 데 도움이 됩니다.
2022년 8월 11일 업데이트됨
--

Vite Ionic 프로젝트에서 작동하도록 라이브 리로드하기

나는 Live reload를 자주 사용하지 않지만 Vite 프로젝트를 진행하기 위한 수동 접근 방식입니다.
먼저 서버를 시작하십시오

aaronksaunders@Aarons-14MacBookProM1Pro my-react-app % npm run dev

> [email protected] dev
> vite


  VITE v3.0.6  ready in 359 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
12:57:47 AM [vite] hmr update /src/App.tsx

그런 다음 위 명령에서 서버가 실행 중인 주소를 사용하여 수정capacitor.config.ts

const config: CapacitorConfig = {
  appId: 'my.react.app',
  appName: 'my-react-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server : {
    "url" : "http://127.0.0.1:5173/"  //<= use address the server is running on locally
  }
};

마지막으로 기기에 앱을 배포합니다.

aaronksaunders@Aarons-14MacBookProM1Pro my-react-app

…

View on GitHub