쿠...sal: [컴][웹] vue3/vite 에서 multi page app 작업

vue/ vuejs / 여러페이지 / 멀티 / 여러

vue3/vite 에서 multi page app 작업

아래처럼 설정을 하면

/entry
  + main/
    - index.html
  + test/
    - index.html

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    rollupOptions: {
      // https://vitejs.dev/guide/build.html#multi-page-app
      input: {
        main: resolve(__dirname, 'entry/main/index.html'),
        test: resolve(__dirname, 'entry/test/index.html'),
      },
      output: {
        // https://rollupjs.org/configuration-options/#output-dir
        dir: 'dist' // if you want to change the dist folder name
      }
    },
    // build: { sourcemap: true },
  },
})

결과는 다음처럼 만들어진다.

/dist/entry
  + main/
    - index.html
  + test/
    - index.html

이것의 단점은

depth 를 맞춰서 directory 를 만들어야 한다.
그래서 entry directory 를 root 에 둘 수 밖에 없다.
(그래서 위의 경우 static server 에서 path의 기본값을 'entry/main/index.html' 로 잡아줘야 한다.)
같은 template html 이라도 복사해서 넣어줘야 한다.

vite-plugin-virtual-mpa

vite-plugin-virtual-mpa 라는 plugin 을 사용할 수 있다. 방법은 다음과 같다.

다음처럼 설치하면 된다.

npm i -D vite-plugin-virtual-mpa

그리고 여기를 참고해서 vite.config.js 에 설정을 추가 하면 된다.
참고로 build.rollupOptions.input 에 main이 있고, createMpaPlugin 의 pages 에 main 이 있다면, pages의 main 만 만들어진다.

<!-- src/template.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

import { fileURLToPath, URL } from 'node:url'

import { resolve } from 'path'
import { defineConfig, normalizePath } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createMpaPlugin, createPages } from 'vite-plugin-virtual-mpa';

const pages = createPages([
  {
    name: 'main2',
    filename: `entry2/index.html`,
    entry: '/src/main.js',
    data: {
      title: 'This is Main page',
    },
  },
]);

const base = '/';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createMpaPlugin({
      template: 'src/template.html',
      /**
       * You can write directly or use `createPages` function independently outside and then pass it to this field.
       * Both of the above can enjoy type hints.
       */
      pages,
      /**
       * Use html minimization feature at build time.
       */
      htmlMinify: true,
      /**
       * Customize the history fallback rewrite rules for `dev server`.
       * If you config your pages as above, this rewrite rules will be automatically generated.
       * Otherwise you should manually write it, which will overwrite the default.
       */
      // rewrites: [
      //   {
      //     from: new RegExp(
      //       normalizePath(`/${base}/(apple|banana|strawberries|home)`),
      //     ),
      //     to: (ctx) => normalizePath(`/${base}/fruits/${ctx.match[1]}.html`),
      //   },
      // ],
      /**
       * Customize the history fallback rewrite rules for `preview server`.
       * This option is almost the same with `rewrites`.
       */
      previewRewrites: [
        // If there's no index.html, you need to manually set rules for history fallback like:
        { from: /.*/, to: '/home.html' },
      ],
      /**
       * Sometimes you might want to reload `pages` config or restart ViteDevServer when
       * there are some files added, removed, changed and so on. You can set `watchOptions` to
       * customize your own logic.
       *
       * The `include` and `exclude` based on `Rollup.createFilter`
       * @see https://vitejs.dev/guide/api-plugin.html#filtering-include-exclude-pattern
       */
      watchOptions: {
        events: ['add', 'unlink', 'change'],
        include: [
          '**/pages/**',
          '**/infos/**',
        ],
        handler: (ctx) => {
          console.log(ctx.type, ctx.file);
          // ctx.reloadPages();
        },
      },
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    // rollupOptions: {
    //   // https://vitejs.dev/guide/build.html#multi-page-app
    //   input: {
    //     main: resolve(__dirname, 'entry/main/index.html'),
    //     test: resolve(__dirname, 'entry/test/index.html'),
    //   },
    //   output: {
    //     // https://rollupjs.org/configuration-options/#output-dir
    //     dir: 'dist' // if you want to change the dist folder name
    //   }
    // },
    // build: { sourcemap: true },
  },
})

vue-route html5 mode

SPA에서 url 로 route 을 할 수 있다. 그리고 lazy loading 도 되니, 몇몇 경우에는 multi-page 대시 single page 를 고려해 볼 수 있을 듯 하다.

쿠...sal

[컴][웹] vue3/vite 에서 multi page app 작업

vue3/vite 에서 multi page app 작업

vite-plugin-virtual-mpa

vue-route html5 mode

See Also

댓글 없음:

댓글 쓰기