我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

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 window
const {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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Idea中添加Maven项目支持scala的详细步骤

这篇文章主要介绍了Idea中添加Maven项目支持scala,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-03-03

idea项目代码打包为jar包的超详细步骤

因为业务开发场景需要,将开发项目中的Java类打成一个jar包引入到外部工具中,下面这篇文章主要给大家介绍了关于idea项目代码打包为jar包的相关资料,需要的朋友可以参考下
2023-01-11

Vue项目中使用百度地图api的详细步骤

在之前的一个小项目中,用到的显示当地的地图功能,下面这篇文章主要给大家介绍了关于Vue项目中使用百度地图api的详细步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-11-13

Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解

这篇文章主要介绍了Vue项目代码之路由拆分、Vuex模块拆分、element按需加载,项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理,本文通过示例给大家详细讲解,需要的朋友可以参考下
2022-11-13

vue项目中使用mapbox地图切换底图的详细教程

最近开始入坑前端mapbox地图,跟大家一起慢慢深入学习,下面这篇文章主要给大家介绍了关于vue项目中使用mapbox地图切换底图的详细教程,文中给出了详细的实例代码,需要的朋友可以参考下
2023-05-18

如何在vue项目中通过配置 webpack-obfuscator实现代码加密混淆

如何在vue项目中通过配置 webpack-obfuscator实现代码加密混淆?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。安装npm install --save-de
2023-06-06

史上最详细的Vue实战项目之喵喵电影源码免费领取

Vue是web前端中重要的框架之一,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。所以,对于web前端开发人员来说,掌握Vue的应用非常重要。V
2023-06-03

分享Vue项目中安装两个不同版本依赖的详细步骤

在一个 Vue 项目中,可能需要安装不同版本的依赖。例如,你在项目中使用了一个 Vue 组件库,这个组件库的某些组件需要使用 Vue 的 2.x 版本,而你的项目使用的是 Vue 3.x 版本。这时,你就需要在项目中同时安装两个不同版本的 Vue。下面是如何在 Vue 项目中安装两个不同版本的依赖的详细步骤:1. 在项目根目录下执行以下命令安装 npm 模块 yarn:```n
2023-05-14

如何在在线答题中添加题目的代码和程序设计题

随着互联网的发展,在线学习和在线考试已经成为一种趋势。在在线考试中,程序设计题是一类常见的题目类型。如何在在线答题平台中添加题目的代码和程序设计题,成为了一个重要的问题。本文将介绍如何通过具体的代码示例来实现这一功能。首先,为了能够在在线答
2023-10-21

Nginx服务器中为网站或目录添加认证密码的配置详解

这篇文章主要介绍了Nginx服务器中为网站或目录添加认证密码的配置详解,使用到了Apache的htpasswd工具,需要的朋友可以参考下nginx可以为网站或目录甚至特定的文件设置密码认证。密码必须是crypt加密的。可以用apache的h
2023-06-05

编程热搜

目录