參考部落格:https://blog.csdn.net/jabony/...
1.安裝 vue cli4.x 全域性環境
npm install -g @vue/cli
2.建立 vue 專案(自己找個方便的檔案目錄建立專案)
vue create hello-world(專案名稱)
cd hello-world //進入專案根目錄
npm install //安裝依賴
npm run serve //執行專案
3.打包 vue 專案
在根檔案目錄的 vue.config.js 檔案裡(沒有就自己建立),修改輸出檔案路徑,例如:
module.exports = {
publicPath: "./",
outputDir: 'dist'
}
然後執行打包命令,
npm run build
就可以得到打包後的資料夾 dist。
使用 electron,用打包後的 dist 檔案生成使用者端。
1.安裝 electron 依賴
npm i -D electron@latest
npm i -D electron-packager
2.在 dist資料夾內新增 electron.js 和 package.json 檔案
dist/electron.js
const electron = require('electron')
const path = require('path')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const globalShortcut = electron.globalShortcut //快捷鍵
let mainWindow
const Menu = electron.Menu
function createWindow () {
Menu.setApplicationMenu(null)
// Create the browser window.
mainWindow = new BrowserWindow({
width: 980,
height: 640
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
mainWindow = null
})
// 通過快捷鍵就可以開啟偵錯模式 ctrl + shift + l
globalShortcut.register('CommandOrControl+Shift+L', () => {
let focusWin = BrowserWindow.getFocusedWindow()
focusWin && focusWin.toggleDevTools()
})
}
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
if (mainWindow === null) createWindow()
})
dist/package.json
{
"name": "專案名稱",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "electron.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^6.0.12"
}
}
3.修改根檔案的 package.json,新增 electron_build 命令,如下:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron_build": "electron-packager ./dist --platform=win32 --arch=x64 --overwrite"
},