vue.js + electron 빌드시 빈 화면 문제

Question

안녕하세요. 이번에 vue.js &#43; electron를 이용해서 앱을 만들고 있는데 거의 만들고 베타를 배포할려고 electron:serve로 실행해서 보았을 경우에는 잘 보였으나 electron:build 했을때는 잘 보이지 않습니다. 어떻게 해결 할까요? electron:serve 했을때 electron:build 했을때 background.js 'use strict' import { app, protocol, BrowserWindow } from 'electron' import { createProtocol } from 'vue-cli-plugin-electron-builder/lib' import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer' const isDevelopment &#61; process.env.NODE_ENV !&#61;&#61; 'production' // Scheme must be registered before the app is ready protocol.registerSchemesAsPrivileged([ { scheme: 'app', privileges: { secure: true, standard: true } } ]) async function createWindow() { // Create the browser window. const win &#61; new BrowserWindow({ //fullscreen: true, webPreferences: { // Use pluginOptions.nodeIntegration, leave this alone // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION, webSecurity: false } }) win.webContents.openDevTools() win.setMenu(null) if (process.env.WEBPACK_DEV_SERVER_URL) { // Load the url of the dev server if in development mode await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL) if (!process.env.IS_TEST) win.webContents.openDevTools() } else { createProtocol('app') // Load the index.html when not in development win.loadURL('file://' &#43; __dirname &#43; '/index.html') } } // Quit when all windows are closed. app.on('window-all-closed', () &#61;> { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd &#43; Q if (process.platform !&#61;&#61; 'darwin') { app.quit() } }) app.on('activate', () &#61;> { // 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 &#61;&#61;&#61; 0) createWindow() }) // 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', async () &#61;> { if (isDevelopment && !process.env.IS_TEST) { // Install Vue Devtools try { await installExtension(VUEJS3_DEVTOOLS) } catch (e) { console.error('Vue Devtools failed to install:', e.toString()) } } createWindow() }) // Exit cleanly on request from parent process in development mode. if (isDevelopment) { if (process.platform &#61;&#61;&#61; 'win32') { process.on('message', (data) &#61;> { if (data &#61;&#61;&#61; 'graceful-exit') { app.quit() } }) } else { process.on('SIGTERM', () &#61;> { app.quit() }) } } router.js import { createWebHistory, createRouter } from 'vue-router'; import main from './view/index.vue' import see_more_cpu from './view/see_more_cpu.vue' import see_more_ram from './view/see_more_ram.vue' import see_more_network from './view/see_more_nework.vue' const routes &#61; [ { path: '/', name: 'App', component: main }, { path: '/more/cpu', name: 'more_cpu', component: see_more_cpu }, { path: '/more/ram', name: 'see_ram', component: see_more_ram }, { path: '/more/network', name: 'see_network', component: see_more_network } ]; const router &#61; createRouter({ history: createWebHistory(), routes, }); export default router; package.json { &#34;name&#34;: &#34;server-dashboard&#34;, &#34;version&#34;: &#34;0.1.0&#34;, &#34;private&#34;: true, &#34;author&#34;: &#34;가림처리&#34;, &#34;scripts&#34;: { &#34;serve&#34;: &#34;vue-cli-service serve&#34;, &#34;build&#34;: &#34;vue-cli-service build&#34;, &#34;lint&#34;: &#34;vue-cli-service lint&#34;, &#34;electron:build&#34;: &#34;vue-cli-service electron:build&#34;, &#34;electron:serve&#34;: &#34;vue-cli-service electron:serve&#34;, &#34;postinstall&#34;: &#34;electron-builder install-app-deps&#34;, &#34;postuninstall&#34;: &#34;electron-builder install-app-deps&#34; }, &#34;main&#34;: &#34;background.js&#34;, &#34;dependencies&#34;: { &#34;&#64;kyvg/vue3-notification&#34;: &#34;^2.3.4&#34;, &#34;&#64;popperjs/core&#34;: &#34;^2.11.0&#34;, &#34;axios&#34;: &#34;^0.24.0&#34;, &#34;bootstrap&#34;: &#34;^5.1.3&#34;, &#34;chart.js&#34;: &#34;^3.6.0&#34;, &#34;core-js&#34;: &#34;^3.6.5&#34;, &#34;electron&#34;: &#34;^16.0.2&#34;, &#34;electron-builder&#34;: &#34;^22.14.5&#34;, &#34;fs&#34;: &#34;^0.0.1-security&#34;, &#34;vue&#34;: &#34;^3.0.0&#34;, &#34;vue-chartjs&#34;: &#34;^3.5.1&#34;, &#34;vue-router&#34;: &#34;^4.0.0-0&#34;, &#34;vue-sweetalert2&#34;: &#34;^5.0.2&#34; }, &#34;devDependencies&#34;: { &#34;&#64;vue/cli-plugin-babel&#34;: &#34;~4.5.0&#34;, &#34;&#64;vue/cli-plugin-eslint&#34;: &#34;~4.5.0&#34;, &#34;&#64;vue/cli-plugin-router&#34;: &#34;~4.5.0&#34;, &#34;&#64;vue/cli-service&#34;: &#34;~4.5.0&#34;, &#34;&#64;vue/compiler-sfc&#34;: &#34;^3.0.0&#34;, &#34;babel-eslint&#34;: &#34;^10.1.0&#34;, &#34;electron&#34;: &#34;13.0.0&#34;, &#34;electron-devtools-installer&#34;: &#34;^3.1.0&#34;, &#34;eslint&#34;: &#34;^6.7.2&#34;, &#34;eslint-plugin-vue&#34;: &#34;^7.0.0&#34;, &#34;vue-cli-plugin-electron-builder&#34;: &#34;^2.1.1&#34;, &#34;vue-cli-plugin-vuetify&#34;: &#34;^2.4.5&#34; }, &#34;eslintConfig&#34;: { &#34;root&#34;: true, &#34;env&#34;: { &#34;node&#34;: true }, &#34;extends&#34;: [ &#34;plugin:vue/vue3-essential&#34;, &#34;eslint:recommended&#34; ], &#34;parserOptions&#34;: { &#34;parser&#34;: &#34;babel-eslint&#34; }, &#34;rules&#34;: {} }, &#34;browserslist&#34;: [ &#34;> 1%&#34;, &#34;last 2 versions&#34;, &#34;not dead&#34; ] }

khh · Answer

안녕하세요. 1년 가까이 된 글이지만 혹시 해결하셨나요? 같은 문제를 겪고 있습니다.

vue.js + electron 빌드시 빈 화면 문제

1개의 답변

Q&A 목록