caoxiemeihao / nuxt-electron

Integrate Nuxt and Electron
MIT License
169 stars 18 forks source link

Page navigation not working in build, blank page #82

Closed sev-b closed 1 week ago

sev-b commented 2 weeks ago

I am using electron-forge to build a project using this module with

npx nuxi generate && electron-forge make

the build works fine and I am also able to start the app and the first page loads fine but when trying to navigate to a different page using this.$router.push('/mypage/subpage') I just get a blank page and the error:

chromewebdata/:1 Not allowed to load local resource: file:///[app-path]/resources/app.asar/.output/public/#/mypage/subpage

with the folderstructure in nuxt like so

.
└── pages/
    └── mypage/
        └── subpage.vue

Any idea on what the problem could be?

config:

import fs from 'node:fs'
import path from 'node:path'
import process from 'node:process'
import pkg from './package.json'

import { defineNuxtConfig } from 'nuxt/config'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
import eslint from 'vite-plugin-eslint2'

const __dirname = import.meta.url
fs.rmSync(path.join(__dirname, '..', 'dist-electron'), { recursive: true, force: true })

export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        {
          hid: 'description',
          name: 'description',
          content: process.env.npm_package_description || '',
        },
      ],
      link: [{ rel: 'icon', type: 'image/x-icon', href: 'static/favicon.ico' }],
    },
  },
  devtools: { enabled: process.env.NODE_ENV === 'development' },
  modules: [
    'nuxt-electron',
    '@nuxt/eslint',
    '@pinia/nuxt',
    (_options, nuxt) => {
      if (!nuxt.options.dev) {
        nuxt.options.nitro.runtimeConfig ??= {}
        nuxt.options.nitro.runtimeConfig.app ??= {}
        nuxt.options.nitro.runtimeConfig.app.baseURL = './'
      }
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
  ],
  electron: {
    disableDefaultOptions: true,
    build: [
      {
        // Main-Process entry file of the Electron App.
        entry: process.env.NODE_ENV !== 'testing' ? 'electron/main.mts' : 'electron/testing.mts',
      },
      {
        entry: 'electron/preload.mts',
        onstart(args) {
          // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
          // instead of restarting the entire Electron App.
          args.reload()
        },
      },
    ],
  },
  ssr: false,
  router: {
    options: {
      hashMode: true,
    },
  },
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    build: {
      minify: process.env.NODE_ENV === 'production',
      rollupOptions: {
        external: ['fsevents', ...Object.keys('dependencies' in pkg ? pkg.dependencies : {})],
      },
    },
    vue: {
      template: {
        transformAssetUrls,
      },
    },
    plugins: [
      eslint({
        fix: true,
        cache: false,
      }),
    ],
    // TODO: check additionalData @use statements
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
        @use "~/assets/scss/abstracts/_index.scss" as *;
        @use "~/assets/scss/main.scss"  as *;
        `,
        },
      },
    },
  },
})
sev-b commented 1 week ago

It turned out to be linked to the rollupOptions.external I initially added as a fix for an issue like to this

Removing ...Object.keys('dependencies' in pkg ? pkg.dependencies : {}) fixed the issue with the page loading!