Vue CLI 3에서 PWA 앱을 만들고 GitHubPages에 게시

개요

Vue CLI 버전 3이 나와 PWA를 쉽게 넣을 수 있기 때문에 시도했습니다.

GitHub Pages에 올리기만 하면 가이드에도 쓰여 있다 입니다만, PWA 에의 대응도 해 보았습니다

준비

Vue CLI 3 넣기

2.x가 포함되어 있으면 한 번 제거한 다음

자세한 내용은 Vue CLI 가이드을 참조하십시오

작성시 Vue CLI 버전은 3.0.1입니다.

프로젝트 만들기

@vue/cli 실행 ( $ vue create pwa-sample 모든 프로젝트 이름)

pwa-sample가 표시되므로 Please pick a preset를 선택합니다.

아래와 같은 화면이 되므로 PWA를 선택해 둔다(공간으로 전환)

4. 나중에 원하는 설정으로 프로젝트 만들기

GitHubPages에 대한 대응

1. 루트 디렉토리에 Manually select features를 작성해, 다음을 기술

vue.config.js

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/pwa-sample/'
    : '/',
  outputDir: 'docs',
};

2. vue.config.js 의 경로를 상대 경로로 수정

manifest.json

{
  ...
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png", //ここ
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png", //ここ
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html", //ここ
  ...
}

3. 빌드한다 ( /public/manifest.json or npm run build )
4. GitHub에 Publish
5. GitHub의 Publish 대상 리포지토리의 Settings의 GitHub Pages의 Source 항목을 None → master brunch/docs folder로 변경

요약

GitHub Pages에 대한 응답으로 yarn build 경로를 수정하는 것을 제외하고는 기본적으로 Vue CLI가 모두 제공됩니다. CLI 놀라운