1. Primero, clonemos la demostración en el sitio web oficial de electron
# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
A continuación, realice las siguientes modificaciones en main.js y package.json en el proyecto de clonación
- principal.js
win.loadFile('../dist/index.html'); //修改路径
- paquete.json
{
"name": "my-Electron",
"version": "1.0.0",
"main": "electron.js", //改为electron.js 为后面做准备
"license": "MIT",
"scripts": {
"start": "electron ."
},
2. Configure el proyecto vue existente
1. Instale la dependencia de electrones y ejecute el siguiente comando
npm install electron --save-dev
npm install electron-packager --save-dev
2. Copie el main.js modificado arriba en la carpeta de compilación del proyecto y cámbiele el nombre a electron.js
3. Cambie assetsPublicPath a una ruta relativa en el directorio config/index.js
assetsPublicPath: './',
4. Agregue una instrucción a package.json en el proyecto
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"electron_dev": "npm run build && electron build/electron.js",//新增的命令
entonces corre
//生成dist文件夹
npm run build
//运行electron
npm run electron_dev
Ahora, la generación de la aplicación de escritorio básicamente se ha implementado con éxito, ¡pero el último paso es el empaquetado!
Primero, copie electron.js en la carpeta de compilación y el archivo package.json previamente modificado en dist ,
y luego agregue las siguientes instrucciones al paquete.json en el proyecto vue (este paquete.json es el proyecto vue original)
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"electron_dev": "npm run build && electron build/electron.js",
"electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./src/assets/ele.ico --overwrite" //新增的指令
},
Entre ellos, icon=./src/assets/ele.ico es para generar el ícono del archivo exe, y el ico aquí debe ser el formato de archivo ico nativo. Aquí está el enlace de producción en línea de ico
Finalmente ejecuta el siguiente comando
npm run build
npm run electron_build
Finalmente, se generará una carpeta correspondiente como my-Electron-win32-x64 Busque my-Electron.exe en el archivo generado y haga clic para abrirlo y ver la aplicación de escritorio generada. Como se muestra en la imagen a continuación (esto es generado por el proyecto existente de mi empresa)
Tenga en cuenta que la página puede estar en blanco después de abrir
Aproximadamente hay dos razones:
la primera: en general, primero determine si es un problema de ruta y, si es un problema de ruta, modifique la ruta.
El segundo método: si el modo predeterminado configurado en el enrutador/índice es historial, entonces estará en blanco después del empaquetado. Reemplace el historial con hash o elimine la configuración del modo predeterminado.
Si debe usar el modo de historial, debe agregar un recurso candidato en el lado del servidor que cubra todas las situaciones: si la URL no coincide con ningún recurso estático, debe devolver un index.html, que es la página de la que depende su aplicación. . Así que simplemente elimine el modo o cambie el modo a hash