【Vue.js】Xserver에 Vue CLI로 만든 초간이 페이지를 배포해 보았다.
2993 단어 vue-routerVue.jsvue-clixserver
소개
Vue CLI를 사용한 포트폴리오 제작은 처음이었기 때문에, 일단 제작에 착수하기 전에 배포가 가능한지 시도해 보았습니다.
(모처럼 만들었는데 배포할 수 없다니 된다면 너무 슬프니까...웃음)
결론, 비교적 간단하게 할 수 있었습니다◎
제작 앱에 관하여
고양이책을 참고로, Vue CLI로 Vue Router를 이용한 간이 페이지를 우선 만들었습니다(정말 간이적입니다.)
네비버에 홈과 문의 버튼이 있으며, 거기에서보기를 전환하면됩니다. (이제 jQuery에서 해라...)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fchobimusic.com%2Fwp-content%2Fuploads%2F2020%2F03%2Fvue.jpg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a90e1acde0efadced57047ac5a71403c)
Vue CLI로 제작한 앱의 릴리스에는 npm run build로 먼저 빌드해야 하는 것 같습니다.
![](https://chobimusic.com/wp-content/uploads/2020/03/vue1.jpg)
dist 디렉토리가 작성되고 그 안에 빌드된 파일이 있습니다.
그런데 액세스했는데 표시되지 않는다. . .
분명히
config/index.js
를 다음과 같이 다시 작성해야합니다.// assetsPublicPath: '/',
assetsPublicPath: '',
그리고는 dist 폴더를 제일 좋아하는 이름(URL에 반영된다)으로 바꾸어 FTP로 업로드.
제 경우에는 Xserver(WordPress에 이용하고 있는 도메인)를 사용하고 있으므로 public_html에 home이라는 폴더명으로 업로드했습니다.
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fchobimusic.com%2Fwp-content%2Fuploads%2F2020%2F03%2Fhome.jpg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=689de93c1208d46b4d4588a624cdea9e)
(도메인명)/home(업로드한 폴더명)로 액세스.
![](https://chobimusic.com/wp-content/uploads/2020/03/up-1024x211.jpg)
무사 표시되었습니다 ◎
참고 사이트
vue-cli로 웹 애플리케이션을 만들고 GitHubPages에서 무료로 폭속으로 출시 한 이야기
Reference
이 문제에 관하여(【Vue.js】Xserver에 Vue CLI로 만든 초간이 페이지를 배포해 보았다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/masaru1125/items/21b52b628e4cb5597259텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)