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

 更新时间:2021年11月18日 11:02:39   作者:(ღ星辰ღ)  
这篇文章通过实例代码给大家介绍了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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue全局事件总线$bus安装与应用小结

    Vue全局事件总线$bus安装与应用小结

    这篇文章主要介绍了Vue全局事件总线$bus安装与应用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • ElementUI中el-dropdown-item点击事件无效问题

    ElementUI中el-dropdown-item点击事件无效问题

    这篇文章主要介绍了ElementUI中el-dropdown-item点击事件无效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue3中埋点指令封装详解

    Vue3中埋点指令封装详解

    对于Vue项目来说,如果遇到一个埋点的需求,我们最好的解决方案就是封装一个指令,所以本文就来和大家详细讲讲具体是如何封装埋点指令的吧
    2023-08-08
  • 使用elementUI表单校验函数validate需要注意的坑及解决

    使用elementUI表单校验函数validate需要注意的坑及解决

    这篇文章主要介绍了使用elementUI表单校验函数validate需要注意的坑及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • elementUI实现下拉选项加多选框的示例代码

    elementUI实现下拉选项加多选框的示例代码

    因产品需求和UI样式调整,本文主要实现elementUI下拉选项加多选框的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 详谈Object.defineProperty 及实现数据双向绑定

    详谈Object.defineProperty 及实现数据双向绑定

    这篇文章主要介绍了详谈Object.defineProperty 及实现数据双向绑定,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue3监听路由的变化代码示例

    vue3监听路由的变化代码示例

    在vue项目中假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新,这篇文章主要给大家介绍了关于vue3监听路由的变化的相关资料,需要的朋友可以参考下
    2023-09-09
  • 关于Element上传组件beforeUpload上传前限制失效问题

    关于Element上传组件beforeUpload上传前限制失效问题

    这篇文章主要介绍了Element上传组件beforeUpload上传前限制失效问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue实现滚动加载的表格

    vue实现滚动加载的表格

    在系统开发中遇到了这么一个问题:后端一次性返回上百条的数据,我需要把返回的数据全部显示在表格里,而且甲方爸爸明确指定了表格是不允许使用分页的。可是当使用a-table装载上百条数据时,页面出现了明显的卡顿现象。只能使用滚动加载的方案来代替了。
    2021-06-06
  • 基于vue编写一个月饼连连看游戏

    基于vue编写一个月饼连连看游戏

    中秋节快要到啦,我们一起用Vue创建一个简单的连连看游戏,连连看大家一定都玩过吧,通过消除相同的图案来清理棋盘,小编将一步步引导大家完成整个游戏的制作过程,让我们开始吧,一起为中秋节增添一些互动和娱乐
    2023-09-09

最新评论