How to use hash history instead of browser history?

[rainmanhhh]

No description provided.

[antfu]

Please read the docs for vue-router-next, ViteSSG bypass your configure to it via the second args

[rainmanhhh]

what is "the second args"? vite defineConfig? didn't find any router related args in vite.config.ts

[rainmanhhh]

OK I found it in main.ts

[moh1434]

OK I found it in main.ts
my main.ts:

// register vue composition api globally
import { ViteSSG } from 'vite-ssg'
import generatedRoutes from 'virtual:generated-pages'
import { setupLayouts } from 'virtual:generated-layouts'
import { createWebHashHistory } from 'vue-router'
import App from './App.vue'

// windicss layers
import 'virtual:windi-base.css'
import 'virtual:windi-components.css'
// your custom styles here
import './styles/main.css'
// windicss utilities should be the last style import
import 'virtual:windi-utilities.css'
// windicss devtools support (dev only)
import 'virtual:windi-devtools'

const routes = setupLayouts(generatedRoutes)

// https://github.com/antfu/vite-ssg
export const createApp = ViteSSG(
  App,
  {
    routes,
    history: createWebHashHistory(),
    base: import.meta.env.BASE_URL,
  },
  (ctx) => {
    // install all modules under `modules/`
    Object.values(import.meta.globEager('./modules/*.ts')).map(i => i.install?.(ctx))
  },
)

This works only on dev mode.
If i write pnpm build i get:

[vite-ssg] Build for server...
vite v2.7.10 building SSR bundle for production...
✓ 52 modules transformed.
.vite-ssg-temp/manifest.webmanifest        0.38 KiB
.vite-ssg-temp/main.mjs                    60.86 KiB
.vite-ssg-temp/assets/style.defb76cf.css   21.61 KiB

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
(node:115654) UnhandledPromiseRejectionWarning: ReferenceError: location is not defined
    at createWebHashHistory (/mnt/2C586E41586E0A42/TODO_list/vitesse/node_modules/.pnpm/vue-router@4.0.12_vue@3.2.26/node_modules/vue-router/dist/vue-router.cjs.js:737:5)
    at file:///mnt/2C586E41586E0A42/TODO_list/vitesse/.vite-ssg-temp/main.mjs:1255:12
    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async build (/mnt/2C586E41586E0A42/TODO_list/vitesse/node_modules/.pnpm/vite-ssg@0.17.5_97bac1ad760e801e4df55702908e73e1/node_modules/vite-ssg/dist/node/cli.cjs:180:44)
    at async Object.handler (/mnt/2C586E41586E0A42/TODO_list/vitesse/node_modules/.pnpm/vite-ssg@0.17.5_97bac1ad760e801e4df55702908e73e1/node_modules/vite-ssg/dist/node/cli.cjs:294:3)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:115654) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:115654) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I noticed that history: createWebHistory(), also doesn't work with pnpm build

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
(node:116363) UnhandledPromiseRejectionWarning: ReferenceError: window is not defined
    at useHistoryStateNavigation (/mnt/2C586E41586E0A42/TODO_list/vitesse/node_modules/.pnpm/vue-router@4.0.12_vue@3.2.26/node_modules/vue-router/dist/vue-router.cjs.js:505:35)
    at createWebHistory (/mnt/2C586E41586E0A42/TODO_list/vitesse/node_modules/.pnpm/vue-router@4.0.12_vue@3.2.26/node_modules/vue-router/dist/vue-router.cjs.js:597:31)
    at file:///mnt/2C586E41586E0A42/TODO_list/vitesse/.vite-ssg-temp/main.mjs:1255:12
    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async build (/mnt/2C586E41586E0A42/TODO_list/vitesse/node_modules/.pnpm/vite-ssg@0.17.5_97bac1ad760e801e4df55702908e73e1/node_modules/vite-ssg/dist/node/cli.cjs:180:44)
    at async Object.handler (/mnt/2C586E41586E0A42/TODO_list/vitesse/node_modules/.pnpm/vite-ssg@0.17.5_97bac1ad760e801e4df55702908e73e1/node_modules/vite-ssg/dist/node/cli.cjs:294:3)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:116363) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:116363) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[Zehir]

@moh1434 I have the same result when I build. Did you find a solution for that in between ?

[rainmanhhh]

@moh1434 @Zehir
my main.ts:

// eslint-disable-next-line import/order
import { modules } from './importModules'
import type { ViteSSGContext } from 'vite-ssg'
import { ViteSSG } from 'vite-ssg'
import generatedRoutes from 'virtual:generated-pages'
import { setupLayouts } from 'layouts-generated'
import { createWebHashHistory } from 'vue-router'
import 'default-passive-events'
import App from './App.vue'
const routes = setupLayouts(generatedRoutes)

// https://github.com/antfu/vite-ssg
// noinspection JSUnusedGlobalSymbols
export const createApp = ViteSSG(
  App,
  // {routes, history: undefined} will cause 'location is undefined' error with ssr
  import.meta.env.VITE_APP_SSR ? { routes } : { routes, history: createWebHashHistory() },
  (ctx) => {
    Object.entries(modules).forEach(([k, v]: [string, any]) => {
      if (import.meta.env.DEV) console.debug(`imported module ${k}:`, v)
      share(k, registerModule(ctx, v))
    })
    function getModuleName(key: string) {
      const p2 = key.lastIndexOf('.')
      return p2 < 0 ? key.substring(10) : key.substring(10, p2) // length of './modules/' is 10
    }
    function registerModule(context: ViteSSGContext, module: Record<string, Record<string, any>>) {
      const exported = module.default
      if (typeof exported === 'function') {
        const plugin = exported(context)
        if (typeof plugin === 'function' || typeof plugin?.install === 'function') context.app.use(plugin)
        return plugin
      }
    }
    function share(key: string, module: any) {
      if (module !== undefined) window.shared[getModuleName(key)] = module
    }
    window.shared.app = ctx.app
  },
)

importModules.ts:

// if you need import other files, change suffix below
export const modules = import.meta.globEager('./modules/*.{ts,css}')