iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue项目中添加electron的详细代码
  • 243
分享到

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

2024-04-02 19:04:59 243人浏览 八月长安
摘要

1.在package.JSON中添加 "main": "electron.js", 在 “scripts”: {添加: "package": "electron-pac

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

--结束END--

本文标题: vue项目中添加electron的详细代码

本文链接: https://www.lsjlt.com/news/157676.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

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

下载Word文档
猜你喜欢
  • vue项目中添加electron的详细代码
    1.在package.json中添加 "main": "electron.js", 在 “scripts”: {添加: "package": "electron-pac...
    99+
    2024-04-02
  • electron-vue 项目添加启动loading动画的实现思路
    前言   electron-vue脚手架搭建的项目,在开发阶段可能你注意不到项目启动慢的问题,但是在build 生成的exe可执行文件,启动后,要反应很久才能进入到app.vue ...
    99+
    2024-04-02
  • Idea中添加Maven项目支持scala的详细步骤
    目录一、Scala环境搭建1、安装步骤二、Scala插件安装1、插件离线安装步骤三、HelloWorld案例1、IDEA环境创建四、关联Scala源码五、官方编程指南一、Scala环...
    99+
    2023-03-03
    Idea中添加Maven Idea Maven scala
  • vue项目中如何添加枚举
    目录vue项目添加枚举在vue文件中引用使用方法vue中枚举的使用1. 建一个js文件如:common.js2. 在页面直接引入vue项目添加枚举 添加文件,文件名为enum.js ...
    99+
    2024-04-02
  • 如何为老vue项目添加vite支持详解
    1、前言 接手公司的某个项目已经两年了,现在每次启动项目都接近1分钟,hmr也要好几秒的时间,but vite2发布之后就看到了曙光,但是一直没有动手进行升级,昨天终于忍不住了,升...
    99+
    2024-04-02
  • vue项目支付功能代码详解
    1.支付宝方式: 支付宝方式:点击支付宝支付, 调用后台接口(携带订单号),后台返回一个form表单(HTML字符串结构), 提交form就可以调用支付宝支付 代码: // al...
    99+
    2024-04-02
  • antd项目实现彩蛋效果的详细代码
    目录1、效果图2、首先在components目录下创建Transform目录,包括index.css、index.js3、全局引入马上就要过节了,想把自己的项目搞得酷炫一些,对整个网...
    99+
    2024-04-02
  • 项目中一键添加husky实现详解
    目录关于huskypre-commitcommit-msg一键添加husky先把用到的import拿出来溜溜package验证husky安装询问使用prompts进行交互提示生成命令...
    99+
    2024-04-02
  • Vue项目中接口调用的详细讲解
    在企业开发过程中,往往有着明确的前后端的分工,前端负责接收、使用接口,后端负责编写、处理接口。 对于前端如何使用接口,今天在Vue中进行讲解。 一个项目往往由这几个部分组成。 其中...
    99+
    2024-04-02
  • 在IDEA中Debug调试VUE项目的详细步骤
    调试js代码,每次都在要在代码中写debugger,或者在chrome中打断点,而且chrome的断点信息不人性化。偶然发现idea竟然有这个功能,简直神器啊。研究了半天终于搞定了,...
    99+
    2024-04-02
  • vue 项目代码拆分的方案
    目录背景 目的 拆分前 流程设计目录结构设计存在的问题 拆分后 流程设计目录结构设计解决的问题 关键代码总结 其他实现方式 背景 由于之前的数据库防火墙产品与数据库审计产品使用的是...
    99+
    2024-04-02
  • vue项目中CSS目录代码的作用是什么
    这篇文章主要讲解了“vue项目中CSS目录代码的作用是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue项目中CSS目录代码的作用是什么”吧!工作了几...
    99+
    2024-04-02
  • 用electron打包vue项目中的报错问题及解决
    目录1.  首先一定要cd到项目的根目录2.  接下来运行如何用electron打包vue项目,请参见我的另一篇文章:如何用electron打包vue项目为桌面应...
    99+
    2024-04-02
  • vue-cli创建vue项目的详细步骤记录
    目录什么是Vue脚手架vue-cli创建vue项目总结什么是Vue脚手架 Vue脚手架,也就是vue cli。如果我们平时只是写一些简单的页面的时候,只需要下载vue.js就行了。但...
    99+
    2024-04-02
  • django项目、vue项目部署云服务器的详细过程
    目录上线架构图服务器购买与远程连接安装git安装mysql安装redis(源码安装)安装python3.8(源码安装)安装uwsgi安装虚拟环境安装nginx(源码安装)vue项目部...
    99+
    2024-04-02
  • idea项目代码打包为jar包的超详细步骤
    目录前言一、将所有依赖和模块代码打包为一个jar二、只将模块代码打包为一个jar总结 前言 假设我有如下简单 maven 项目 点击 File ==> Projec...
    99+
    2023-01-11
    idea将项目打包成jar包 idea 打包jar idea 打包jar
  • Vue中实现3D标签云的详细代码
    预览: 代码: 页面部分: <template> <div class="tagcloud-all" ref="tagcloudall"&...
    99+
    2024-04-02
  • vue mixins代码复用的项目实践
    目录导语:场景:1. 代码里有很多当前组件需要的纯函数,methods过多2. 举个例子你有一个组件需要抛出两个数据,直接的v-model不适用。需要采用$emit方法3. 同理,可...
    99+
    2024-04-02
  • 如何在抖音vue项目中添加多个文件夹
    在抖音 vue 中添加多个文件夹可以帮助我们更好地管理我们的项目文件。下面我们将介绍如何在抖音 vue 中添加多个文件夹。首先,我们需要打开我们的抖音 vue 项目。然后在我们的项目根目录中创建一个新的文件夹。例如,我们创建一个名为 &qu...
    99+
    2023-05-14
  • nginx部署vue项目的详细图文教程
    首先需要在服务器里下载nginx, apt-get install nginx 检查nginx是否安装,输入如下命令后若出现版本号则安装成功 nginx -v 然后启动nginx ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作