vue項目中添加electron的詳細代碼
1.在package.json中添加
"main": "electron.js",
在 “scripts”: {添加:
"package": "electron-packager ./ appName --overwrite"
在"dependencies": {添加:
"electron-share-memory": "^1.0.1", "node-gyp-build": "^4.3.0", "vue-photo-preview": "^1.1.3",
在 “devDependencies”: {添加:
"electron": "^15.3.1", "electron-packager": "^15.4.0",
2.vue.config.js
在devServer: {修改:
// open: true,(之前是沒有注釋掉的,現(xiàn)在把他注釋掉)
在proxy: {修改
'/api': {
target: "electron-renderer",(只改了這個地方,之前是 target: 'http://localhost',)
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
3.main.js添加:
import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(preview) // 解決electron 報錯 process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'TRUE'
4.在vue.config.js同級添加electron.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 1889,
height: 1000,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
// mainWindow.loadFile('./dist/index.html')
mainWindow.loadURL('http://172.16.1.155:7890/xjbd')
// Open the DevTools.
mainWindow.webContents.openDevTools()
}
// 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.whenReady().then(() => {
createWindow()
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 (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// 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.
5.在vue.config.js同級添加preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
6.先把項目打包
npm run dev
然后在運行
npm run package


到此這篇關于vue項目中添加electron的文章就介紹到這了,更多相關vue添加electron內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
ElementUI中el-dropdown-item點擊事件無效問題
這篇文章主要介紹了ElementUI中el-dropdown-item點擊事件無效問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04
使用elementUI表單校驗函數(shù)validate需要注意的坑及解決
這篇文章主要介紹了使用elementUI表單校驗函數(shù)validate需要注意的坑及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
elementUI實現(xiàn)下拉選項加多選框的示例代碼
因產(chǎn)品需求和UI樣式調(diào)整,本文主要實現(xiàn)elementUI下拉選項加多選框的示例代碼,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10
詳談Object.defineProperty 及實現(xiàn)數(shù)據(jù)雙向綁定
這篇文章主要介紹了詳談Object.defineProperty 及實現(xiàn)數(shù)據(jù)雙向綁定,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
關于Element上傳組件beforeUpload上傳前限制失效問題
這篇文章主要介紹了Element上傳組件beforeUpload上傳前限制失效問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03

