vue项目使用electron开发过程记录

最新推荐文章于 2024-08-14 18:28:12 发布

Study_Live_Sun

最新推荐文章于 2024-08-14 18:28:12 发布

阅读量1.1k

点赞数

文章标签： electron vue.js javascript

本文链接：https://blog.csdn.net/Study_Live_Sun/article/details/120080709

版权

1、首先全局安装安装包，也可以使用过程中单独安装

npm install -g electron
npm install -g electron-packager

2、vue项目配置vue.config.js,需要使用相对路径

3、vue项目确认路由文件，删除mode

4、在vue项目下新建electron目录，目录结构如下

5、electron目录结构如下

6、electron下的文件内容

main.js文件内容如下

const { app, BrowserWindow } = require("electron");

const path = require('path');

const fs = require("fs");
function reloadTheWin(win) {
  fs.watch("./dist", event => {
    if (event == "change") {
        console.log('updating')
      win.reload();
    }
  });
}
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    icon: path.join(__dirname, './dist/favicon.ico'),
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });
  const env = process.env.NODE_ENV
  if( env== 'development'){
    //开发环境 do something
    console.info(env)
    console.info('kaifa')
    win.loadURL('http://localhost:8080/#/')
  }else{
    //生产环境 do something
    console.info(env)
    console.info('shengchan')
    win.loadFile(__dirname + "/dist/index.html");
  }

  reloadTheWin(win);
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});
app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

package.json文件内容如下

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "mian.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "set NODE_ENV=development&&electron . --mode=development",
    "serve-prod": "set NODE_ENV=production&&electron . --mode=production",
    "build": "electron-packager .",
    "package-win-my": "electron-packager ./ AppName --overwrite --platform=win32 --asar --out=OutputFolderName --prune=true"
  },
  "electronPackagerConfig": {
    "packageManager": "npm",
    "icon": "/dist/favicon.ico"
  },
  "extraResources": [
    {
      "filter": [
        "static/*"
      ]
    }
  ],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "electron": "^14.0.0"
  }
}

preload.js文件内容如下

// preload.js

// All of the Node.js APIs are available in the preload process.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})