Electron-vue

Electron介绍

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。通过将Chromium和Node.js嵌入到其二进制文件中，Electron 允许您维护一个 JavaScript 代码库并创建可在 Windows、macOS 和 Linux 上运行的跨平台应用程序——无需原生开发经验。

注意：在搭建好vue-cli（脚手架）前提下进行安装与使用，然后将项目进行打包。

​​​​​​​详细教程入口

npm run build

命令成功后就会在项目中生成dist文件夹

安装与配置

接下来在dist文件夹下新建终端或者在利用cmd命令打开，并且输入如下命令

npm install -g electron  或者 cnpm install -g electron

electron -v 检测是否成功安装

 在dist文件夹下新建main.js和packge.json

main.js

const {app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {
  width:800,
  height:600
};//窗口配置程序运行窗口的大小
function createWindow(){
  win = new BrowserWindow(windowConfig);//创建一个窗口
  win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html
  win.webContents.openDevTools();  //开启调试工具
  win.on('close',() => {
    //回收BrowserWindow对象
    win = null;
  });
  win.on('resize',() => {
    win.reload();
  })
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
  app.quit();
});
app.on('activate',() => {
  if(win == null){
    createWindow();
  }
});

packege.json

{
    "name": "liyouxiu",
    "productName": "liyouxiu",
    "author": "liyouxiu",
    "version": "1.0.0",
    "main": "main.js",
    "description": "liyouxiu",
    "scripts": {
      "pack": "electron-builder --dir",
      "dist": "electron-builder",
      "postinstall": "electron-builder install-app-deps"
    },
    "build": {
      "electronVersion": "1.8.4",
      "win": {
        "requestedExecutionLevel": "highestAvailable",
        "target": [
          {
            "target": "nsis",
            "arch": [
              "x64"
            ]
          }
        ]
      },
      "appId": "liyouxiu",
      "artifactName": "demo-${version}-${arch}.${ext}",
      "nsis": {
        "artifactName": "demo-${version}-${arch}.${ext}"
      }
    },
    "dependencies": {
      "core-js": "^2.4.1",
      "electron-builder": "^20.44.4",
      "electron-package": "^0.1.0",
      "electron-updater": "^2.22.1"
    }
  }
  

进行测试，输入以下命令

electron .

 打包成软件包
 npm install electron-builder
 npm install electron-package
 执行打包命令：
 electron-bulider

关于运行时的报错问题

vue打包项目及Failed to load resource: net::ERR_FILE_NOT_FOUND问题的解决

webpack.prod.config.js进行如下修改

  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
    publicPath:'./' //添加
  },

webpack.base.config.js进行如下修改

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? "./"+config.build.assetsPublicPath
      : "./"+config.dev.assetsPublicPath
  },

最后重新进行打包测试就行了！！！