electron-vue 打包编译build问题

Question

问题描述

使用electron-vue运行dev时正常，但是打包时出现以下错误

目测可能是webpack中出现的问题（猜测），但是由于没有看到错误位置，所不清楚是什么错误
有没有有经验的大佬可以解答以下
图中红色是ERROR in unknown: Unexpected token (62093:29)

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

node@11.2
electron-builder@20.19.2

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
我把入口重新封装了一下，不知道会不会有影响，也贴一下

import {resolve} from 'path'
import {app, BrowserWindow, dialog, ipcMain, Menu} from 'electron'

if (process.env.NODE_ENV !== 'development') {
    global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}
const winURL = process.env.NODE_ENV === 'development'
    ? `http://localhost:9080`
    : `file://${__dirname}/index.html`

class Client {
    constructor() {
        this.mainWindow = null
    }

    useMiddleware() {
        let middlewares = [
            require('./middleware/window'),
            require('./middleware/about'),
            require('./middleware/file')
        ]

        for (const middleware of middlewares) {
            middleware({
                app,
                ipcMain,
                mainWindow: this.mainWindow,
                dialog
            })
        }

    }

    run() {
        this.windowWatch()
    }

    windowWatch() {
        app.on('ready', () => {
            this.mainWindow = this.createWindow()
            this.useMiddleware()
            this.mainWindow.on('closed', () => {
                this.mainWindow = null
            })
        })
        app.on('window-all-closed', () => {
            if (process.platform !== 'darwin') {
                app.quit()
            }
        })

        app.on('activate', () => {
            if (this.mainWindow === null) {
                this.createWindow()
            }
        })
    }

    createWindow(config) {
        const options = {
            show: true,
            frame: false,
            width: 350,
            height: 670,
            transparent: true,
            resizable: false,
            maximizable: false,
            webPreferences: {
                nodeIntegrationInWorker: true
            }
        }
        if (process.platform === 'win32') { // 针对windows平台做出不同的配置
            options.frame = false // 创建一个frameless窗口
            options.backgroundColor = '#fff' // 背景色
        }
        const finalConfig = Object.assign(options, config)
        const win = new BrowserWindow(finalConfig)
        win.loadURL(winURL)
        return win
    }
}


const application = new Client()
application.run()

在线等👀

Answer 1

提个问题提了很久了，目前已经解决，我正式回复一下。

这是由于当时我使用的Mac，而希望打包Win的软件，当时编译Mac软件一切正常，但是打包Windows时却报错。

最后我在云服务器上租了按量付费的服务器，配置环境后打包成功。

Answer 2

楼主。我也遇到了同样的问题，不过环境与你正好相反，windows打包没问题，但是mac打包就报同样的错误，请问当时解决的思路是什么，有没有找到问题出现的根本原因

Answer 3

在 webpack.renderer.config.js 文件中注释 new BabiliWebpackPlugin() 看看？

if (process.env.NODE_ENV === 'production') {
  rendererConfig.devtool = ''

  rendererConfig.plugins.push(
    // new BabiliWebpackPlugin(),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/electron/static'),
        ignore: ['.*']
      }
    ]),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"',
      'process.env.NODE_SERVICE': '"electron"'
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  )
}

Answer 4

我也出现过类似的问题:

  ERROR in unknown: Unexpected token (203134:3)

提供一下我找到的问题，是因为引入了electron-store包，导致的错误；
如果你们也有类似的问题，可以从依赖包方面考虑一下。

Answer 5

一样的报错，我的解决方法是：
electron-store依赖不小心放到devDependencies里面去了，改回dependencies即可；

最好看下是不是某个依赖实际是输出后需要的，然后引入位置放错了；

Answer 6

楼上解决了吗啊