您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

vue项目中添加electron的详细代码

51自学网 2022-02-21 13:37:22
  javascript

1.在package.json中添加

 "main": "electron.js",

在 “scripts”: {添加:

 "package": "electron-packager ./ appName --overwrite"

在"dependencies": {添加:

 "electron-share-memory": "^1.0.1",   "node-gyp-build": "^4.3.0",   "vue-photo-preview": "^1.1.3",

在 “devDependencies”: {添加:

 "electron": "^15.3.1",   "electron-packager": "^15.4.0",

2.vue.config.js

在devServer: {修改:

// open: true,(之前是没有注释掉的,现在把他注释掉)

在proxy: {修改

 '/api': {        target: "electron-renderer",(只改了这个地方,之前是 target: 'http://localhost',)        changeOrigin: true,        pathRewrite: {          '^/api': ''        }      }

3.main.js添加:

import preview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'Vue.use(preview)// 解决electron 报错process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'TRUE'

4.在vue.config.js同级添加electron.js

// Modules to control application life and create native browser windowconst {app, BrowserWindow} = require('electron')const path = require('path')function createWindow () {  // Create the browser window.  const mainWindow = new BrowserWindow({    width: 1889,    height: 1000,    webPreferences: {      preload: path.join(__dirname, 'preload.js')    }  })  // and load the index.html of the app.//   mainWindow.loadFile('./dist/index.html')  mainWindow.loadURL('http://172.16.1.155:7890/xjbd')  // Open the DevTools.  mainWindow.webContents.openDevTools()}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.whenReady().then(() => {  createWindow()  app.on('activate', function () {    // On macOS it's common to re-create a window in the app when the    // dock icon is clicked and there are no other windows open.    if (BrowserWindow.getAllWindows().length === 0) createWindow()  })})// Quit when all windows are closed, except on macOS. There, it's common// for applications and their menu bar to stay active until the user quits// explicitly with Cmd + Q.app.on('window-all-closed', function () {  if (process.platform !== 'darwin') app.quit()})// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.

5.在vue.config.js同级添加preload.js

// All of the Node.js APIs are available in the preload process.// It has the same sandbox as a Chrome extension.window.addEventListener('DOMContentLoaded', () => {  const replaceText = (selector, text) => {    const element = document.getElementById(selector)    if (element) element.innerText = text  }  for (const type of ['chrome', 'node', 'electron']) {    replaceText(`${type}-version`, process.versions[type])  }})

6.先把项目打包

 npm run dev

然后在运行

 npm run package

请添加图片描述

请添加图片描述

到此这篇关于vue项目中添加electron的文章就介绍到这了,更多相关vue添加electron内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net!


下载地址:
M1 pro芯片启动Vue项目的方法步骤
Vue项目优化打包详解
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。