electron-vue项目学习记录（1）

1.查看 官方文档 与自己安装的electron版本是否一致。（我的是15.++，建议初始化后切入项目目录再查看一次）

electron -v  //检查electron版本

2.初始化一个electon-vue项目，相关配置看个人习惯，可参考下图

3.安装必要的依赖

npm install // 最新的淘宝地址https://registry.npm.taobao.org/

4.运行electron-vue项目

5.解决 the server responded with a status of 404报错问题
在electron-vue/dev-runner.js中修改代码块62-75行

const server = new WebpackDevServer(
      compiler,
      {
        contentBase: path.join(__dirname, '../'),
        quiet: true,
        //hot: true,
        before (app, ctx) {
          app.use(hotMiddleware)
          ctx.middleware.waitUntilValid(() => {
            resolve()
          })
        }
      }
    )

6.打包项目，报错

SyntaxError: Identifier ‘tasks’ has already been declared

这里出错的原因是初始项目的。electron-vue/build.js文件中出现了重复变量tasks建议更换其中一个，我的做法是修改37-41行

  const Tasks = ['main', 'renderer']
  const m = new Multispinner(Tasks, {
    preText: 'building',
    postText: 'process'
  })

7.继续打包会出现如下报错

app.asar" does not exist. Seems like a wrong configuration

解决方法

npm install multispinner -D //安装multispinner模块

然后在.electron-vue/build.js 文件中添加一句

const Multispinner = require('multispinner')

7. 执行npm run build打包完成，应该能打包完成，如遇到网络问题可以用
   安装dev-sidecar解决