Vue CLI Plugin Electron Builder打包后白屏问题?

Vue: Electron打包Vue项目后,首界面空白(npm run electron:build),而且非常神奇的是当开着终端(npm run electron:serve),打包的exe也能正常显示。第一次提问,求各位小哥哥指点迷津。

路由文件:

package.json

{

  "name": "electron",

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint",

    "electron:build": "vue-cli-service electron:build",

    "electron:serve": "vue-cli-service electron:serve",

    "postinstall": "electron-builder install-app-deps",

    "postuninstall": "electron-builder install-app-deps"

 

  },

  "main": "background.js",

  "dependencies": {

    "cesium": "^1.80.0",

    "core-js": "^3.6.5",

    "element-ui": "^2.15.1",

    "node-sass": "^4.14.1",

    "vue": "^2.6.11",

    "vue-awesome-swiper": "^3.1.3",

    "vue-router": "^3.5.1",

    "vuex": "^3.6.2"

  },

  "devDependencies": {

    "@vue/cli-plugin-babel": "~4.5.0",

    "@vue/cli-plugin-eslint": "~4.5.0",

    "@vue/cli-service": "~4.5.0",

    "babel-eslint": "^10.1.0",

    "electron": "^11.3.0",

    "electron-devtools-installer": "^3.1.0",

    "electron-reloader": "^1.2.0",

    "eslint": "^6.7.2",

    "eslint-plugin-vue": "^6.2.2",

    "sass-loader": "^7.3.1",

    "vue-cli-plugin-electron-builder": "~2.0.0-rc.6",

    "vue-devtools": "^5.1.4",

    "vue-template-compiler": "^2.6.11"

  },

  "eslintConfig": {

    "root": true,

    "env": {

      "node": true

    },

    "extends": [

      "plugin:vue/essential",

      "eslint:recommended"

    ],

    "parserOptions": {

      "parser": "babel-eslint"

    },

    "rules": {}

  },

  "browserslist": [

    "> 1%",

    "last 2 versions",

    "not dead"

  ],

  "__npminstall_done": false

}

 

vue.congig.js

const CopyWebpackPlugin = require('copy-webpack-plugin')

const webpack = require('webpack')

let cesiumSource = './node_modules/cesium/Source'

let cesiumWorkers = '../Build/Cesium/Workers'


 

const path = require("path");

 

function resolve(dir) {

  return path.join(__dirname, dir);

}

 

module.exports = {

  /* 打包配置 */

  pluginOptions: {

    electronBuilder: {

      nodeIntegration: true, // 渲染进程可以使用node模块

      builderOptions: {

        asar: false,

        productName: 'UFI-data', // 项目名称

        appId: 'com.electron.template', // 应用程序id

        copyright: 'Copyright © template', // 应用程序版权行

        directories: {

          output: 'dist_electron', // 打包输出的目录,相对于项目根路径

        },

        win: {

          icon: './public/favicon.ico',

          legalTrademarks: 'Copyright © template', // 商标注册

          publisherName: 'electron', // 发行者名称,与代码签名证书中的名称完全相同

          requestedExecutionLevel: 'highestAvailable', // 应用程序请求执行的安全级别

        },

        target: [{

          target: 'nsis', // 目标包类型

          arch: ['ia32'], // 属于X86体系结bai构的du32位版本

        }, ],

        // 没有配置 nsis 的时候的安装包名,此配置项会被 nsis 覆盖

        // artifactName: `${config.productName}.exe`,  

        icon: './public/favicon.ico', // 图标路径,安装包和免安装程序都会应用

        nsis: {

          // 创建一键安装程序还是辅助安装程序

          oneClick: false,

          // 是否允许用户更改安装目录。

          allowToChangeInstallationDirectory: true,

          // 是否为辅助安装程序显示安装模式安装程序页(选择每台计算机或每用户)。或者是否总是按所有用户(每台机器)安装

          perMachine: true,

          // 允许申请提升。如果为false,用户将不得不以提升的权限重启安装程序

          allowElevation: true,

          // 打出的安装包名称,默认 ${productName} Setup ${version}.${ext},${productName} 对应productName 或 package.json 中的name, ${version}对应 package.json 中的 version 

          // artifactName: `${config.productName}-安装包-V${config.version}.exe`,

          // 完成后是否运行已安装的应用程序。对于辅助安装程序,相应的复选框将被删除

          // runAfterFinish: true,

          // 用于所有快捷方式的名称。默认为应用程序名称,即 productName 的值,如果 productName 没有设置,则默认是 package.json 中的 name,如果name也没有设置,将报错

          // shortcutName: `${config.productName}`,

        },

      }

    }

  },

  publicPath: "./",

  //   设置访问项目目录,方便开发

  chainWebpack: (config) => {

    config.resolve.alias

      .set("@", resolve("src"))

      .set("src", resolve("src"))

      .set("common", resolve("src/common"))

      .set("components", resolve("src/components"));

  },

  devServer: {

    overlay: {

      warnings: true,

      errors: false

    },

    // can be overwritten by process.env.HOST

    // host: "0.0.0.0",

    // port: 8080,

  },

 

  configureWebpack: {

    output: {

      sourcePrefix: ' '

    },

    amd: {

      toUrlUndefined: true

    },

    resolve: {

      alias: {

        'vue$': 'vue/dist/vue.esm.js',

        '@': path.resolve('src'),

        'cesium': path.resolve(__dirname, cesiumSource)

      }

    },

    plugins: [

      new CopyWebpackPlugin([{

        from: path.join(cesiumSource, cesiumWorkers),

        to: 'Workers'

      }]),

      new CopyWebpackPlugin([{

        from: path.join(cesiumSource, 'Assets'),

        to: 'Assets'

      }]),

      new CopyWebpackPlugin([{

        from: path.join(cesiumSource, 'Widgets'),

        to: 'Widgets'

      }]),

      new CopyWebpackPlugin([{

        from: path.join(cesiumSource, 'ThirdParty/Workers'),

        to: 'ThirdParty/Workers'

      }]),

      new webpack.DefinePlugin({

        CESIUM_BASE_URL: JSON.stringify('./')

      })

    ],

    module: {

      unknownContextCritical: /^.\/.*$/,

      unknownContextCritical: false

    }

  }

};

 

本机开发环境运行正常吗?web项目还是APP

桌面应用

本机开发环境能正常运行,打包后的exe在服务开着的情况下也能运行(npm run electron:serve),但是在关了终端后打开是白屏。

您好,我是有问必答小助手,你的问题已经有小伙伴为您解答了问题,您看下是否解决了您的问题,可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务,为了后续更快速的帮您解决问题,现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中,希望能得到您的支持与协助!

速戳参与调研>>>https://t.csdnimg.cn/Kf0y