Resumen de los problemas encontrados al desarrollar aplicaciones de Electron utilizando el complemento Vue CLI Electron Builder

La página está en blanco después de abrir el problema.

1 Descripción del problema

El proyecto local vue-electron se muestra normalmente durante la vista previa del desarrollo y aparece una pantalla blanca al empaquetar y abrir la página una vez completada la instalación del sistema win11.

2 causas

ElectronhashSólo funciona correctamente cuando el modo de enrutamiento es .

3 soluciones

Problemas comunes | Complemento Vue CLI Electron Builder (nklayman.github.io)

Cambie al modo hash en router/index.jsel archivo .createRouter

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

Problema 2: la dirección de solicitud es incorrecta después del embalaje

1 Descripción del problema

Complemento Vue CLI Electron Builder puede crear proyectos Vue.js en aplicaciones de escritorio de Electron. Cuando se usa para desarrollar aplicaciones de escritorio de Ubuntu, el dominio cruzado se configura en el front-end vue.config.js. npm run electron:serveCuando se usa el comando para ejecutarlo localmente, la solicitud del servidor remoto puede responder exitosamente. Sin embargo, después de usar el npm run electron:buildcomando para construir el proyecto empaquetado, la solicitud al servidor remoto falla y los detalles de la consola son los siguientes:

2 causas

El proyecto utilizó andamios de paquete web durante el desarrollo, inició el servicio http proporcionado por webServer y tenía un proxy. Cuando se ejecuta, npm run electron:servehttp://localhost:8080 se puede cargar directamente y la solicitud se puede realizar con éxito en la aplicación. Cuando el proyecto se npm run electron:buildconstruye y empaqueta usando el comando, se convierte en una aplicación de escritorio. En este momento, no hay soporte para el servicio http. Al enviar una solicitud ajax, no existe la llamada baseURL que apunta al prefijo de URL http:/ /ip:puerto. La URL de solicitud final será como se muestra en la figura app://./api/xxx.

3 soluciones

Elimine o comente la configuración entre dominios en vue.config.js, restaure la URL base en la clase de herramienta de solicitud unificada encapsulada y createWindow()agregue la configuración en la función en background.js webSecurity: false. ( artículo de referencia )

1. Elimine o comente la configuración entre dominios en vue.config.js

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

2. Restaurar la URL base en la clase de herramienta de solicitud unificada encapsulada

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

3. createWindow()Agregue la siguiente configuración a la función en 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
       }
     })
   } 
   

apéndice

1. Método de dominio cruzado de configuración front-end del proyecto Vue

1. Agregue la siguiente configuración en vue.config.js

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

2. Modifique la URL base en la clase de herramienta de solicitud unificada encapsulada

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

2 Electron permite la configuración de herramientas de depuración para desarrolladores

Al final de la función en background.js createWindow ()agregue:

win.webContents.openDevTools()