Summary of problems encountered when developing Electron applications using Vue CLI Plugin Electron Builder

The page is blank after opening the problem

1 Problem description

The local vue-electron project displays normally during development preview, and a white screen appears when packaging and opening the page after the win11 system installation is completed.

2 Causes

ElectronhashIt only works properly when the routing mode is .

3 solutions

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

Change to hash mode in router/index.jsthe file .createRouter

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

Problem 2: The request address is wrong after packaging

1 Problem description

Vue CLI Plugin Electron Builder can build Vue.js projects into Electron desktop applications. When using it to develop Ubuntu desktop applications, cross-domain is configured in the front-end vue.config.js, and the npm run electron:serveremote server can respond successfully when running locally using the command. However, npm run electron:buildafter using the command to build the packaged project, the request to the remote server fails and the console fails. Details are as follows:

2 Causes

The project used webpack scaffolding during development, started the http service provided by webServer, and had a proxy. When running, npm run electron:servehttp://localhost:8080 can be directly loaded, and the request can be successfully made in the application. When the project is npm run electron:buildbuilt and packaged using the command, it becomes a desktop application. At this time, there is no http service support. When sending an ajax request, there is no so-called baseURL pointing to a certain http://ip:port url prefix, and the final request url will be becomes as shown in the figure app://./api/xxx.

3 solutions

Delete or comment out the cross-domain configuration in vue.config.js, restore the baseURL in the encapsulated unified request tool class, and createWindow()add the configuration in the function in background.js webSecurity: false. ( reference article )

1. Delete or comment out the cross-domain configuration in vue.config.js

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

2. Restore the baseURL in the encapsulated unified request tool class

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

3. createWindow()Add the following configuration to the function in background.js

   // 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
       }
     })
   } 
   

appendix

1 Vue project front-end configuration cross-domain method

1. Add the following configuration in vue.config.js

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

2. Modify the baseURL in the encapsulated unified request tool class

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

2 Electron enables the configuration of developer debugging tools

At the end of the function in background.js createWindow ()add:

win.webContents.openDevTools()