vite 에서 mpa 사용시 dev 서버 세팅

2023-03-10 · 배운 것 · 3분 읽기

상황

vite 사용시 multi page application을 만들고 싶을때, build할때에 대한 세팅은 공홈에 존재한다.
https://vitejs.dev/guide/build.html#multi-page-app

Vite

그리고 제대로 동작함을 테스트해보았다!

근데 dev서버일때의 대한 문서는 아무리 봐도 존재하지 않는다. 어떻게 할까??

서칭

다행히 관련 issue를 금방 찾을수 있었다.
https://github.com/vitejs/vite/issues/2958#issuecomment-1065810046

transformIndexHtml hook gets the wrong html filepath when running Multi-Page · Issue #2958 · vitejs/vite

해결책

간단한 미들웨어를 추가하는 방식으로 해결하였다.

//vite.config.ts
import { resolve } from 'path';
import { defineConfig } from 'vite';

const outDir = resolve(__dirname, 'dist');

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [{ find: '@', replacement: resolve(__dirname, '.') }],
  },
  build: {
    outDir,
    emptyOutDir: true,
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        intro: resolve(__dirname, 'intro/index.html'),
      },
    },
  },
  plugins: [
    {
      /**
       * @description dev server 에서의 올바른 라우트를 위한 미들웨어
       * @See https://github.com/vitejs/vite/issues/2958#issuecomment-1065810046
       */
      name: 'rewrite-middleware',
      configureServer(serve) {
        serve.middlewares.use((req, _res, next) => {
          if (req.url?.startsWith('/intro')) {
            req.url = '/intro/';
          }
          next();
        });
      },
    },
  ],
});