使用 Vue CLI Plugin Electron Builder 开发 Electron 应用程序时遇到的问题总结

问题一 打开后页面空白

1 问题描述

vue-electron 项目本地在进行开发预览时显示正常，打包且在 win11 系统安装完成后打开页面出现白屏。

2 引发原因

Electron 只有在路由模式为 hash 的情况下才能正常运行。

3 解决方法

Common Issues | Vue CLI Plugin Electron Builder (nklayman.github.io)

在 router/index.js 文件中将 createRouter 修改为 hash 模式。

const router = createRouter({
  - history: createWebHistory(process.env.BASE_URL),	//原来的代码，删除这一行
  + history: createWebHashHistory(process.env.BASE_URL),//增加该行
  routes
})

问题二 打包后请求地址错误

1 问题描述

Vue CLI Plugin Electron Builder 可以将 Vue.js 项目构建为 Electron 桌面应用程序。使用其开发 Ubuntu 桌面应用程序时，在前端 vue.config.js 中配置了跨域，使用 npm run electron:serve 命令在本地运行时请求远程服务器可以成功响应，但是使用 npm run electron:build 命令构建打包项目后，请求远程服务器失败，控制台详情如下：

2 引发原因

项目在开发时使用了 webpack 脚手架，启动了 webServer 提供的 http 服务，而且有代理，当运行 npm run electron:serve 时，可以直接加载 http://localhost:8080，在应用程序中就可以成功请求。当项目使用 npm run electron:build 命令构建打包后，成为桌面应用程序，这时没有 http 服务支撑，当发送 ajax 请求时，没有所谓的 baseURL 指向某一个 http://ip:port 的 url 前缀，最后这个请求 url 就会变为如图所示的 app://./api/xxx。

3 解决方法

删除或注释掉 vue.config.js 中的跨域配置，恢复封装的统一请求工具类中的 baseURL ，在 background.js 中的 createWindow() 函数中添加配置 webSecurity: false 即可。（参考文章）

1. 删除或注释掉 vue.config.js 中的跨域配置

   // vue.config.js
   module.exports = {
   	// 其他配置...
     // 将以下代码删除或注释掉
     // devServer: {
     //   proxy: {
     //     '/projectName/api/version': {
     //       target: 'https://domainName:port',
     //       changeOrigin: true
     //       // pathRewrite: {
     //       //   '^/projectName/api/version': ''
     //       // }
     //     }
     //   }
     // }
   }
   

2. 恢复封装的统一请求工具类中的 baseURL

   // request.js
   // const baseURL = '/projectName/api/version'
   const baseURL = 'https://domainName:port/projectName/api/version'
   

3. 在 background.js 中的 createWindow() 函数中添加如下配置

   // background.js
   async function createWindow () {
     Menu.setApplicationMenu(null)
     // Create the browser window.
     const win = new BrowserWindow({
       frame: true,
       resizable: true,
       width: screen.getPrimaryDisplay().workAreaSize.width,
       height: screen.getPrimaryDisplay().workAreaSize.height,
       webPreferences: {
   
         // 添加此行配置  
         webSecurity: false,
   
         // Use pluginOptions.nodeIntegration, leave this alone
         // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
         nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
         contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
       }
     })
   } 
   

附录

1 Vue 项目前端配置跨域方法

1. 在 vue.config.js 中添加以下配置

   // vue.config.js
   module.exports = {
   	// 其他配置...
     // 添加以下代码
     devServer: {
     	proxy: {
       	'/projectName/api/version': {
         		target: 'https://domainName:port',
           	changeOrigin: true
           	// pathRewrite: {
             //   '^/projectName/api/version': ''
             // }
         }
       }
     }
   }
   

2. 修改封装的统一请求工具类中的 baseURL

   // request.js
   // const baseURL = 'https://domainName:port/projectName/api/version'
   const baseURL = '/projectName/api/version'
   

2 Electron 开启开发者调试工具的配置

在 background.js 中的 createWindow () 函数最后添加：

win.webContents.openDevTools()