Vue Cli 4에서 GitHubPages에 게시하는 방법

vue-cli로 시작하기 Vue.js 자습서 (1)
의 기사를 참고로 vue를 조금 헬로 월드 해 볼까라고 생각하면 상당히 넘기지 않았기 때문에 기사에 남긴다.

제작물의
- 리포지토리는 여기
htps : // 기주 b. 이 m / 쿠이마 c / ゔ 에 _ 드 _ 아 p. 이오
- GitHub Pages는 여기
h tps://쿠마쿠 c. 기주 b. 이오 / ゔ 에_ 드 _ 아 p. 이오/

환경

$ sw_vers ProductName: Mac OS X ProductVersion: 10.15.3 BuildVersion: 19D76

$ node -v v12.1.0

npm -v 6.14.5

vue -V @vue/cli 4.3.1

목차

작성했을 때에 집착한 것

GitHubPages에 공개했을 때 집어 넣은 것

작성했을 때에 집착한 것

참고 기사 vue-cli로 시작하기 Vue.js 자습서 (1)
기사의 환경

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.11.6
BuildVersion:   15G1611

$ node -v
v6.11.3

$ npm -v
3.10.10

vue --version
2.8.2

그래서 내 환경과 크게 달라, 특히 vu cli 버전의 차이로 상당히 집착했다.

집어넣은 장소만 발췌하면
① sass-loader를 설치한 후의 의존관계를 해소할 수 없었다vue init 로 만들면 의존관계를 해소할 수 없었기 때문에 vue create 로 다시 만들면 잘 되었다
이어서 @vue -V @vue/cli 4.3.1 로 구축했다. ← 중요

②data: function()의 기술을 하면 에러

Failed to compile.

./src/components/HelloWorld.vue
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/[僕の名前だよ]/Documents/code/vue_js/todo/src/components/HelloWorld.vue
  42:23  error  'event' is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

원인:
ESLint un-used-vars 의 규칙에서 선언은 하고 있지만 이용하고 있지 않는 불필요한 변수에 대한 경고를 받고 있다

해결:
ESLint에서 특정 소스 코드 검사를 비활성화합니다.

기사를 참고로 특정 행에만 ESLint를 사용하지 않도록 설정
//eslint-disable-line 작성function(event) { // eslint-disable-line
③ npm run build 하고 /dist/index.html 에 액세스하면 새하얀!

Vue-CLI3에서 build하면 화면이 새하얀
기사를 참고로

vue.config.js

module.exports = {
    baseUrl: './'
}

하고 다시 npm run build 그러면 잘 갔다.

GitHubPages에 게시했을 때 속임수

npm run build 를 하면 /dist 부하에 파일이 작성되지만, GitHubPages로 공개하려면 /docs 부하에 컴파일해야 한다.

조사해 보면 config/index.js 에 설정을 기술하는 것 같지만 그런 것은 없다! (웃음)
해결책: vue.config.js 에 outputDir: 'docs/',
vue.config.js

module.exports = {
    publicPath: './',
    outputDir: 'docs/', //これ
  }

그리고는 GitHub master 브랜치를 웹페이지로 게시하는 단계(GitHub Pages) 를 참고로 GitHubPages 를 설정한다.

안전하게 게시 할 수있었습니다

참고로 한 것

vue-cli로 시작하기 Vue.js 자습서 (1)

vue-cli로 시작하기 Vue.js 자습서 (2)

ESLint에서 특정 소스 코드 검사를 비활성화합니다.

Vue-CLI3에서 build하면 화면이 새하얀

GitHub master 브랜치를 웹페이지로 게시하는 단계(GitHub Pages)