electron-packager打包应用后，页面空白，应用中的index.html不能执行引入的js脚本

Question

问题描述

我用webpack-vue脚手架创建了工程，开发完成后需要适配多平台，所以又用electron-packager来打包，完成打包后，打开应用，index.html中引入的js和css文件路径都没有错，但是js文件没有执行，页面也是完全空白，求问各位大神，这个怎么解决。问题截图如下：

问题出现的环境背景及自己尝试过哪些方法

这个应用在web上是可以启动的，用的是webpack-dev的server，而且我直接用electron启动桌面应用也是没问题的，我在想用electron生成桌面应用后是否也需要启动一个localhost的server，但是我不知道怎么启动这样一个server

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
我是用的双package.json，package.json的主要内容如下：
打包脚本：
"packager": "electron-packager ./dist VEEClient --platform=darwin --arch=x64 --overwrite --prune --overwrite"
"main": "electron.js"
electron.js的内容如下：
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

let window;
function createWindow() {

window = new BrowserWindow({
    title: 'VEE Client',
    height: 600,
    width: 1000,
    minHeight: 600,
    minWidth: 800,
    minimizable: true,
    webPreferences: {
        webSecurity: false
    }
})
window.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
}))
window.openDevTools()
window.on('close', () => {
    window = null
})

}
app.on('ready', createWindow)
app.on('window-all-closed', () => {

if (process.platform !== 'darwin') {
    app.quit()
}

})
app.on('activate', () => {

if (window === null) {
    createWindow()
}

})

你期待的结果是什么？实际看到的错误信息又是什么？

我想要的结果是打包后的应用启动后和通过Web启动后的结果是一样的。

Answer 1

看不到你的目录结构，不过看你的描述，应该是在开发环境中用的是webpack的server，所以index.html引用的是server地址的打包后的js。现在生产环境了，启动不了server，所以js引用不到
解决办法：修改index.html引用js的地址，改成相对路径或者目录的绝对路径，然后将wepkack打包出的地址改成对应的路径，比如
目录结构

|-src
   |-index.html
   |-dist
       |- common.js//打包后的文件 
|-webpack.config.js

// index.html 
<script src="dist/common.js"></script>
//webpack.config.js
...
output: {
    path: path.resolve(__dirname,'src/dist'),
    filename: '[name].js',
    publicPath: '/src/dist'
},
...