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