使用electron打包vue项目成为应用程序流程及常见问题解答

朱雀 2023-06-25 03:09 170阅读 0赞

# 为什么选择electron？ #

## 版本兼容性 ##

当项目主体针对的医院、政府等单位，一般还在使用相对老旧版本的系统与浏览器，无法对vue框架、ES6等新特性进行支持时，使用electron将web程序打包成exe应用程序即可解决大部分的版本兼容性问题。除非摒弃现有技术栈转而回去写原生的代码，否则你大部分掌握的新语法、新特性与新技术都将得不到应用。

## 混合化开发 ##

类似使用RN或flutter，采用跨平台开发而非原生开发，大多数情况下都是为了节省人工成本从而降低了产品的性能质量。跨平台技术的发展以及资本积累的大势所趋，自然原生开发对于产品是最好不过，可对于大多数小公司而言，大多还是会无奈牺牲些许产品性能而降低大部分开发成本。

## VSCODE就是electron做的 ##

无他，如题。

# 搭建流程 #

## 一.本地安装electron及初始化 ##

### 1.从**https://github.com/electron/electron-quick-start**中clone一份或下载ZIP文件到本地； ###

### 2.项目目录下打开cmd或powershell，输入npm install安装相关模块及依赖； ###

### 3.安装完毕后输入npm start即可预览下载的demo中electron桌面程序； ###

## 二、项目打包及配置 ##

### 1.首先将刚才下载的electron-quick-start里的main.js拷贝到你需要打包的项目的build目录下，并改名为electron.js。 ###

### 2.使用终端进入项目目录，安装相关依赖： ###

npm install -g cnpm --registry=https://registry.npm.taobao.org //淘宝镜像
    cnpm install electron --save-dev
    cnpm install electron-packager --save-dev

### 3.用IDE打开项目，进入electron.js，修改如下： ###

mainWindow.loadFile('./dist/index.html')
    //或
    mainWindow.loadURL('https://www.baidu.com/index.html')
    // 注意mainWindow对象在载入webview时有两种方法
    // loadFile方法为导入本地html loadURL方法为载入线上项目地址

### 4.进入项目的config目录，打开index.js，修改如下： ###

// Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',

### 5.打开项目的package.json文件，修改如下： ###

"main":"build/electron.js",
      "scripts": { 
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "build": "node build/build.js",
        "test":"electron .",
        "electron_build":"electron-packager ./dist exeName --platform=win32 --arch=x64 --icon=./assets/img/favicon.ico --overwrite"
      },

### 6.执行npm run build 打包项目 ###

#### 在打包后的dist目录内拷贝一份electron.js文件，若在第三步使用的不是在线地址，则需要进入该electron.js文件，修改如下： ####

mainWindow.loadFile('index.html')

#### 之后将package.json文件拷贝一份到dist目录下，修改如下： ####

"main":"electron.js"

### 7.打开终端进入项目目录，执行如下： ###

cnpm install electron-packager-interactive --g   //安装打包插件`

electron-packager-interactive -g  //进行可视化打包

## 三、常见问题 ##

### Q.下载或安装依赖时卡住无法成功安装？ ###

### A：优先切换淘宝镜像再下载安装 ###

### Q.执行electron-packager-interactive -g 后打包过程非常缓慢？ ###