[Vue] vue3 + vite 깃허브 페이지 배포하기

 

깃허브 페이지 배포를 시도하면서 발생하는 오류를 기록해보자

 

1. vue 컴포넌트들이 뜨지 않는 이슈

 

배포를 했음에도 불구하고 vue 컴포넌트들이 build가 되지 않는 이슈가 발생했다. 

개발자도구로 보니 assets 파일내에 css, 이미지가 있었지만 vue컴포넌트들과 관련된 js파일이 전혀없었다.

구글링해보니 vite.config.js파일내 rollupOptions에 input관련 설정을 따로 해줘야만 한다는 사실을 알게 되었다.

 

 

컴포넌트 관련 포인트와 경로를 설정하고

rollupOptions내 output을 따로 설정해 이미지와 css, js파일을 구별 설정을 따로 작성하였다. 

 

 

 

 

2. plugin-vue export-helper.D4GAd3iU.js net::ERR_ABORTED 404 (Not Found)

 

설정을 마쳤지만 배포시 plugin-vue export 관련 오류가 개발자도구 console에 잡혔다. 무슨 영문인지 알 수 없어 

@vitejs/plugin-vue 를 삭제하고 vite 최신버전과 버전을 맞춰 재설치했지만 그럼에도 실패!

대체 무슨 영문일까 구글링을 하다보니 스택오버플로우에 남겨진 조언을 얻어 파일이름관련해서 이름을 재설정해주는 함수를 추가하였다.

https://stackoverflow.com/questions/78633671/vue-app-getting-a-plugin-vue-export-helper-404-error-when-deployed 

 

  build: {
    rollupOptions: {
      output: {
        sanitizeFileName: (name) => {
          // Sanitizes file names generated during the build process:
          // - Replaces spaces with dashes ('-').
          // - Removes invalid characters that are not alphanumeric, underscores (_), periods (.), or dashes (-).
          return name
            .replace(/\s+/g, '-') // Replaces spaces with dashes.
            .replace(/[^a-zA-Z0-9_.-]/g, ''); // Removes all invalid characters.
        },
      },
    },
  },

 

그러나, 실은 이것도 아니었다.

대체 영문이 뭘까 터미널에서 디버깅을 하다가 

 

이런 메세지를 발견하게 되는데 (진즉에 이 메세지를 해석했으면 될 것을 안이하게 넘겨버림..)

build관련 설정을 es5가 호환이 가능하게 설정한것에서 온 오류였다. 

 

 

그래서 target에 설정을 esnext로 바꾸고 esbuild 관련설정도 이처럼 바꿔주었다.

jsxInject, jsx는 무시해주길 바란다. 이 프로젝트는 vue이다.

 

 

그리고 깃허브에 배포할 레포지토리 네임을 base로 설정 

 

 

이렇게 설정하고 나니, 무사히 배포하게되었다.