@vitejs/plugin-legacy Base Path 적용

chrome 하위 버전을 고려해야하는 상황이 있었다.
vite에서 쓰이는 env인 import.meta가 chrome 60버전 대에서는 제대로 동작하지 않기 때문으로 보였다. (vite ^5.2.8 을 사용하고 있다.)

그래서 많이들 쓰는 @vitejs/plugin-legacy 으로 설정을 해줬는데, 다른 에러가 나오는 것이었다. legacy에서 만든 polyfill 과 index file이 BasePath를 적용하지 않고 import 하고 있었다.

다른 js 파일들은 제대로 BasePath가 적용되어서 나왔는데, vite-legacy로 만들어진 파일들은 basePath가 적용되지 않고 나왔다. 그래서 경로를 못 찾아서 에러가 났다. base Path를 아예 빼버리면 잘 동작하긴 했지만, 이전부터 계속 붙이고 사용하고 있어서 뺐다간 여러 버그가 날 가능성이 많기에 뺄 순 없는 상황이었다.
그래서 이곳저곳 많은 검색을 해보고 적용해보다가 쉬운 방법을 하나 발견했다.

https://github.com/vitejs/vite/issues/10881
여기서 본 방법인데 experimental 기능이긴 하지만 제대로 동작했다.

export default defineConfig({
  base: basePath,
  experimental: {
    renderBuiltUrl() {
      return { relative: true };
    },
  },
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11', 'Chrome 60'],
    }),
    ...
  ],
  ...
});

이런식으로 설정을 줬고, 결과는 아래와 같이 잘 나왔다.

이렇게 해서 배포하니, import 도 잘 동작하고, 다른 이슈도 없이 잘 되는 것을 확인할 수 있었다.