Build routes to separate folders

[g-rock]

Hello, how can I edit my vite.config build configuration to build each route defined in pages/ to its own folder in dist/? Thank you very much.

# pages/
├── pages
│   ├── landing
│   │   └── index.vue
│   └── summary
│       └── index.vue

# desired dist/ output
dist
├── landing
│   ├── assets/
│   ├── landing.html
├── summary
│   ├── assets/
│   ├── summary.html

[derMart]

I am not sure for the assets part, for the html you can use the includedRoutes hook. Consider you have these routes defined in your main.ts:

import { ViteSSG } from 'vite-ssg';
import App from './App.vue';
import Landing from './Landing.vue';
import Summary from './Summary.vue';

const routes = [
  { path: '/landing', component: Landing },
  { path: '/summary', component: Summary },
]

export const createApp = ViteSSG(
  App,
  { routes },
);

vite.config.ts:

export default {
  plugins: [vue()],
  ssgOptions: {
    includedRoutes(_paths:any[], routes:any[]) {
      return routes.flatMap((route:any) => route.path + route.path));
    },
  },
}

(not sure about the exact types of _path and routes parameters though)

But, remember that the vue router will still only consider the path /landing in the address bar to render the Landing component, and not /landing/landing.html.

If you want them all to be index.html files in their separate directories which works nicely with standard static file servers (as /landing in the address bar will serve /landing/index.html, such that vue router paths still match, you could use this:

includedRoutes(_paths:any[], routes:any[]) {
  // use original route records
  return routes.flatMap((route:any) => route.path + (route.path.endsWith('/') ? 'index' : '/index'));
},