【Vue.js】Xserver에 Vue CLI로 만든 초간이 페이지를 배포해 보았다.

소개

Vue CLI를 사용한 포트폴리오 제작은 처음이었기 때문에, 일단 제작에 착수하기 전에 배포가 가능한지 시도해 보았습니다.

(모처럼 만들었는데 배포할 수 없다니 된다면 너무 슬프니까...웃음)

결론, 비교적 간단하게 할 수 있었습니다◎

제작 앱에 관하여

고양이책을 참고로, Vue CLI로 Vue Router를 이용한 간이 페이지를 우선 만들었습니다(정말 간이적입니다.)

네비버에 홈과 문의 버튼이 있으며, 거기에서보기를 전환하면됩니다. (이제 jQuery에서 해라...)



Vue CLI로 제작한 앱의 릴리스에는 npm run build로 먼저 빌드해야 하는 것 같습니다.



dist 디렉토리가 작성되고 그 안에 빌드된 파일이 있습니다.

그런데 액세스했는데 표시되지 않는다. . .

분명히 config/index.js를 다음과 같이 다시 작성해야합니다.

// assetsPublicPath: '/',
assetsPublicPath: '',

그리고는 dist 폴더를 제일 좋아하는 이름(URL에 반영된다)으로 바꾸어 FTP로 업로드.

제 경우에는 Xserver(WordPress에 이용하고 있는 도메인)를 사용하고 있으므로 public_html에 home이라는 폴더명으로 업로드했습니다.



(도메인명)/home(업로드한 폴더명)로 액세스.



무사 표시되었습니다 ◎

참고 사이트

vue-cli로 웹 애플리케이션을 만들고 GitHubPages에서 무료로 폭속으로 출시 한 이야기