Electron中使用Vue2网站构建跨平台的桌面应用程序

文章已阅读次

此篇文章信息来源于Electron官网资料和自己实践查阅资料所得。

Electron是一个可使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序的工具；

详细信息可查看博主整理的文档：https://xuexiup.github.io/2022/10/13/special3/

这里我们详细介绍下Electron结合Vue2的使用（Vue3项目类似只是网站开发方式变了，Vue3用到了TS）

1）搭建 Vue2.x的网站这里我命名为：my_electron_vue

2）进入网站目录安装Electron及打包工具

cd my_electron_vue

cnpm install –save-dev electron electron-packager

3)执行命令：cnpm install

4)在根目录下创建一个名为：main.js的文件

/*main.js */
const {
    app,    
    BrowserWindow
} = require('electron')
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {},
    })
    //这是vue项目启动的地址
    win.loadURL('http://localhost:8080')
}

app.whenReady().then(() => {
    createWindow()
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

在package.json文件中增加（最后会给出完整的packge.json文件）：

"name": "my_electron_vue",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "xjl",
  "private": true,
  "main": "main.js",

增加vue网站启动项和Electron启动项的指令：

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "electron": "electron-forge start",
  "build": "node build/build.js",    
  "serve": "concurrently \"npm run start\" \"npm run electron\"",
  "package":"electron-packager . Electron_Vue应用 --platform=win32 --arch=x64 --icon=favicon.ico --out=./out --asar --app-version=1.0.1 --overwrite --ignore=node_modules"
},

这里的serve指令是指令start和electron的集合(点我查看npm一次执行多条指令的方法)

这样，通过执行指令：npm run serve便实现了：

1）先执行：npm run dev

启动Vue网站（这里网站地址为：http://localhost:8080），这个“端口号”以及“网站启动时是否默认在浏览器中打开”是可以在config》index.js中修改的。

2）接着自动执行：npm run electron

就会打开Electron窗体，由于我们在Electron入口main.js中使用了加载外部url的指令：win.loadURL(‘http://localhost:8080')

这个url也即是1）执行后启动的Vue网站。

这样，我们便实现了Electron结合Vue实现跨平台桌面应用的程序开发。

这里有一点是Electron默认不是热重载的，如果我们要实现Vue中的内容修改后保存Electron界面上的内容自动修改，请查看内容：Electron项目开发时如何实现热重载？

完整的package.json文件：

{
  "name": "my_electron_vue",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "xjl",
  "private": true,
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "electron": "electron-forge start",
    "build": "node build/build.js",    
    "serve": "concurrently \"npm run start\" \"npm run electron\"",
    "package":"electron-packager . Electron_Vue应用 --platform=win32 --arch=x64 --icon=favicon.ico --out=./out --asar --app-version=1.0.1 --overwrite --ignore=node_modules"
  },
  "dependencies": {
    "concurrently": "^7.3.0",
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "electron": "^20.0.2",
    "electron-packager": "^15.5.1",
    "electron-reloader": "^1.2.3",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}