Я использую Electron-Forge для создания проекта с использованием этого модуля nuxt-electron с
npx nuxi generate && electron-forge make
сборка работает нормально, и я также могу запустить приложение, и первая страница (.output/public/index.html) загружается нормально, но при попытке перейти на другую страницу с помощью this.$router.push('/mypage/subpage')
я просто получаю пустую страницу и ошибку:
chromewebdata/:1 Not allowed to load local resource: file:///[app-path]/resources/app.asar/.output/public/#/mypage/subpage
со структурой папок в nuxt вот так
.
└── pages/
└── mypage/
└── subpage.vue
Я подозреваю, что существует проблема в моей конфигурации сборки nuxt или маршрутизаторе, поскольку «#/mypage/subpage» не является допустимым путем к файлу, а выходные данные сборки (в app.asar) выглядят следующим образом:
.
├── .output/
│ ├── public/
│ │ ├── _nuxt/
│ │ │ ├── [.js files]
│ │ │ └── [.css files]
│ │ ├── 200.html
│ │ ├── 404.html
│ │ └── index.html
│ └── nitro.json
├── .dist-electron/
│ └── ...
├── .node_modules/
│ └── ...
└── pacakge.json
снимок части папки _nuxt
:
это мой текущий файл конфигурации nuxt:
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 *;
`,
},
},
},
},
})
Я уже пробовал несколько решений подобных Not allowed to load local resource
сообщений об ошибках, но большинство из них связано с невозможностью загрузки исходных index.html
файлов и т. д., а не с навигацией по страницам.
Оказалось, что это связано с rollupOptions.external
, который я изначально добавил для исправления такой проблемы, как это
Удаление ...Object.keys('dependencies' in pkg ? pkg.dependencies : {})
исправило проблему с загрузкой страницы!