使用 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 即可。（参考文章）

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

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

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

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

在 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 项目前端配置跨域方法

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

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

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

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

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

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

win.webContents.openDevTools()