Nuxt3/Electron 应用页面导航报错“Not allowed to load local resource”

使用Nuxt3和Electron开发桌面应用程序的过程中，经常会碰到页面导航无法正常跳转，控制台中提示“Not allowed to load local resource”的错误提示。一般在通过编程方式切换页面时出现，比如使用this.$router.push('/mypage/subpage')。错误信息会指出你的应用试图访问本地文件，但由于安全限制，浏览器不允许这样做。

原因分析

由于 Electron 和 Nuxt3 路由机制之间的冲突，Electron 使用的是文件系统路径加载资源，而 Nuxt3 默认使用的是相对路径。

在使用 electron-forge 打包 Electron 应用时，Nuxt3 项目会被打包到 app.asar 文件中。当应用尝试使用相对路径加载页面时，Electron 无法找到对应的文件，从而导致报错。

如何解决

• 检查 rollupOptions.external 配置：确保该配置项没有错误地排除掉页面导航所需的依赖。在本案例中，解决方案是删除 …Object.keys(‘dependencies’ in pkg ? pkg.dependencies : {})。
• 使用 Hash 模式：将 Nuxt3 路由模式设置为 Hash 模式，可以避免 Electron 和 Nuxt3 路由机制之间的冲突。你可以在 nuxt.config.js 文件中添加以下配置：

router: {
  options: {
    hashMode: true,
  },
},

• 使用绝对路径：在进行页面导航时，可以使用绝对路径来加载页面资源。例如，使用 window.location.href = ‘file:///’ + path.join(__dirname, ‘index.html’) 来加载 index.html 页面。