怎么把html封装成桌面应用,如何将一个现有的Vue网页项目封装成electron桌面应用...
需求緣由
開發(fā)了很久的網(wǎng)頁(yè)項(xiàng)目，領(lǐng)導(dǎo)突然想變成桌面應(yīng)用，又要重寫代碼？no，no，no。不可能的。重寫代碼吃力不討好，浪費(fèi)時(shí)間，浪費(fèi)精力。那么我們?cè)撛趺崔k呢？
幸好，electron是如此神奇，它提供了一種能讓你將任何前端代碼的網(wǎng)站頁(yè)面封裝成桌面應(yīng)用。無論是vue，react 還是 angular等現(xiàn)有的框架都能實(shí)現(xiàn)。
基礎(chǔ)
學(xué)習(xí)該內(nèi)容需要基本的 javascript 語法基礎(chǔ)，以及 node.js 基礎(chǔ)。
步驟
1，安裝electron依賴包(局部安裝，只安裝開發(fā)依賴)
npm install electron --save-dev
2，package.json 同級(jí)位置創(chuàng)建文件 electron.js
electron.js 文件內(nèi)容：
// 主進(jìn)程
// Modules to control application life and create native browser window
const {app, protocol, Menu, BrowserWindow } = require('electron')
const path = require('path')
const { readFile } = require ('fs')
const { URL } = require ('url')
// 處理文件打包之后的訪問路徑為 app的相對(duì)路徑,
function createProtocol(scheme) {
protocol.registerBufferProtocol(
scheme,
(request, respond) => {
let pathName = new URL(request.url).pathname
pathName = decodeURI(pathName) // Needed in case URL contains spaces
readFile(path.join(__dirname, pathName), (error, data) => {
if (error) {
console.error(`Failed to read${pathName}on${scheme}protocol`, error)
}
const extension = path.extname(pathName).toLowerCase()
let mimeType = ''
if (extension === '.js') {
mimeType = 'text/javascript'
} else if (extension === '.html') {
mimeType = 'text/html'
} else if (extension === '.css') {
mimeType = 'text/css'
} else if (extension === '.svg' || extension === '.svgz') {
mimeType = 'image/svg+xml'
} else if (extension === '.json') {
mimeType = 'application/json'
}
respond({ mimeType, data })
})
},
error => {
if (error) {
console.error(`Failed to register${scheme}protocol`, error)
}
}
)
}
// 防止 localStorage 不可訪問
protocol.registerSchemesAsPrivileged([{
scheme: 'app',
privileges: {
secure: true,
standard: true
}
}])
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
let template = [] //頂部菜單模板
function createWindow () {
// Create the browser window. 桌面應(yīng)用的初始寬度、高度
mainWindow = new BrowserWindow({
width: 1600,
height: 1000,
})
// and load the index.html of the app.
createProtocol('app') // 創(chuàng)建一個(gè)應(yīng)用，訪問路徑的初始化
mainWindow.loadURL('app://./index.html') // 入口文件， 窗口指向 index.html 文件作為首頁(yè)，這里可以是vue,react,angular 的打包之后的dist目錄內(nèi)部的index.html文件。
// Open the DevTools.
// mainWindow.webContents.openDevTools()
let menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu) // 重新設(shè)置桌面應(yīng)用的頂部菜單
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// 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.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') app.quit()
})
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 (mainWindow === null) createWindow()
})
// 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.
3，在package.json文件中增加指令，用來啟動(dòng)Electron桌面應(yīng)用
“scripts”: {
“dev”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“electron-dev”: “vue-cli-service build && electron electron.js”, ------新增
“electron-build”: “electron-packager ./dist/ --arch=x64 --icon=logo.ico --overwrite” ------ 新增，打包成.exe 文件使用
},
備注：注意添加文件 logo.ico 到 package.json 的同級(jí)位置。
這里需要靈活變化：
1，vue-cli-service build 是打包成dist文件的命令，具體項(xiàng)目的打包命令具體替換，本項(xiàng)目使用了vue-cli腳手架，故命令如此。
2，./dist/ 是指生成的桌面應(yīng)用是在dist文件內(nèi)部的基礎(chǔ)上打包的，因此要看你的index.html文件在哪里，一般build之后都有一個(gè)index.html文件。
4，在關(guān)于webpack的基礎(chǔ)配置文件里的module.exports 內(nèi)部添加一條數(shù)據(jù) publicPath: ‘./’,
這里是為了讓build之后的文件引用相對(duì)路徑。
5，將所有的api 請(qǐng)求的前面都加上對(duì)應(yīng)的網(wǎng)站域名。
這里最好有一個(gè)公用的函數(shù)，一般都是在axios 的 baseURL參數(shù)里面。
6，先執(zhí)行 npm run electron_dev，可以運(yùn)行開發(fā)中的electron桌面應(yīng)用。
接下來就是怎么打包出桌面應(yīng)用了，這里用的是打包工具electron-packager ，當(dāng)然也可以使用別的工具。
7，安裝 electron-packager
npm install electron-packager --save-dev
8，復(fù)制 package.json 到dist文件里，新增一條數(shù)據(jù) “main”: “electron.js”,
9，復(fù)制 electron.js 到dist文件里，
10，執(zhí)行 npm run electron_build ，便會(huì)生成安裝包文件 vue-antd-pro-win32-x64 , 打開里面的 .exe 文件即可
總結(jié)
總體來說，代碼不多，步驟也不多，但具體項(xiàng)目又可能遇到各種不可預(yù)測(cè)的問題，仍然需要具體問題具體分析。
參考內(nèi)容
https://www.cnblogs.com/liulun/p/12984456.html
本文地址：https://blog.csdn.net/Aglaia_web/article/details/107543945
總結(jié)
以上是生活随笔為你收集整理的怎么把html封装成桌面应用,如何将一个现有的Vue网页项目封装成electron桌面应用...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HAC集群中，计划重新初始化数据库使用原
- 下一篇： vue中使用Ueditor编辑器