第十一章:Electron-Vue创建项目

  • 首先需要安装vue-cli脚手架
npm install -g vue-cli
  • 1

详细步骤请看:vue学习(五)—vue-cli构建vue项目目录结构

  • 全局安装Electron
npm install -g electron
  • 1

详细请看:第一章:Electron环境搭建

  • Electron-Vue创建项目
vue init simulatedgreg/electron-vue my-project
  • 1

在这里插入图片描述

  • 安装依赖并运行你的程序
cnpm install
  • 1

在这里插入图片描述

  • 运行(npm run dev)
    在这里插入图片描述

注意如果node版本大于12

  • 运行错误

在这里插入图片描述

  • 解决方案(修改.electron-vue目录下的webpack.renderer.config.js和webpack.web.config.js)

1、webpack.web.config.js

修改前:
在这里插入图片描述
修改后:

在这里插入图片描述

plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({filename: 'styles.css'}),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: false
    }),
    new webpack.DefinePlugin({
      'process.env.IS_WEB': 'true'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

2、webpack.renderer.config.js

修改前:

在这里插入图片描述
修改后:

在这里插入图片描述

plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({filename: 'styles.css'}),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 运行结果(npm run dev)

在这里插入图片描述


让vscode代码提示

当前项目下
cnpm install electron --save

  • 1
  • 2
  • 3

使用 js-cookie

cnpm i js-cookie
  • 1

打包

npm run build
  • 1
  • 问题一:Error: Unresolved node modules: vue, highcharts,***
解决方案
删除node_modules
使用 npm install (不是使用cnpm会出问题)
  • 1
  • 2
  • 3
  • 问题二:electron 打包一直downloading
在 文件夹跟目录下新建文件 .npmrc,内容如下:
electron_mirror=http://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org

  • 1
  • 2
  • 3
  • 4

在这里插入图片描述
再次进行num run build 速度就会快起来

  • 项目的图片资源报错

图片资源不要放在assets中,放在static目录下

在这里插入图片描述

path.join(__static,  'yuma.png')

  • 1
  • 2
  • 左上角的图标不显示
这是build/icons/icon.ico制作的问题,可以选择IconWorkshop软件来制作
  • 1
  • 左上角默认系统名称
在主进程中设置

//设置系统名称(也是初始化左上角名称——项目名称在index.ejs中修改)
app.setName("舆情监控系统")

  • 1
  • 2
  • 3
  • 4
  • 5

在这里插入图片描述

  • 启动时白屏
在主进程中

mainWindow = new BrowserWindow({
    height: 800,
    useContentSize: true,
    width: 1200,
    show: false //先隐藏
  })

  mainWindow.loadURL(winURL)

  mainWindow.on('ready-to-show', () => {
    mainWindow.show() //初始化后再显示
    
    //右键菜单
    require('./model/menu')
    //系统托盘
    require('./model/tray')
  })


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

在这里插入图片描述
注意require引入时要放在mainWindow.show()之后,否则报错

  • 点击桌面图标只开启一个应用

在主进程中底部直接添加

const shouldQuit = app.makeSingleInstance((commandLine, workingDirectory) => {
  // Someone tried to run a second instance, we should focus our window.
  if (mainWindow) {
    if (mainWindow.isMinimized()) mainWindow.restore()
    mainWindow.focus()
    mainWindow.show()
  }
})

if (shouldQuit) {
  app.quit()
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在这里插入图片描述

  • 安装electron-squirrel-startup
npm i electron-squirrel-startup --save
不能使用npm打包会报错

在主进程的最上面添加
if (require('electron-squirrel-startup')) {
  app.quit();
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

在这里插入图片描述

  • nsis配置
"nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "allowElevation": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述

'nsis': {
    // 是否一键安装,建议为 false,可以让用户点击下一步、下一步、下一步的形式安装程序,如果为true,当用户双击构建好的程序,自动安装程序并打开,即:一键安装(one-click installer)
    'oneClick': false,
    // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
    'allowElevation': true,
    // 允许修改安装目录,建议为 true,是否允许用户改变安装目录,默认是不允许
    'allowToChangeInstallationDirectory': true,
    // 安装图标
    'installerIcon': 'build/installerIcon_120.ico',
    // 卸载图标
    'uninstallerIcon': 'build/uninstallerIcon_120.ico',
    // 安装时头部图标
    'installerHeaderIcon': 'build/installerHeaderIcon_120.ico',
    // 创建桌面图标
    'createDesktopShortcut': true,
    // 创建开始菜单图标
    'createStartMenuShortcut': true,
    // electron中LICENSE.txt所需要的格式,并非是GBK,或者UTF-8,LICENSE.txt写好之后,需要进行转化,转化为ANSI
    'license': 'LICENSE.txt'
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • mac 打包错误Can not locate Mac Memory.pm in @INC you may need to install the Mac:Memor
是因为electron-builder版本和当前的mac系统版本不匹配导致,
我这里electron-builder版本是20.44.4——>升级为22.7.0


卸载 electron-builder
npm uninstall electron-builder

安装 electron-builder指定版本
npm install electron-builder@22.7.0 --save-dev

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述

执行npm run build 成功打包
  • 1

注意mac不需要托盘,on(‘close’,会报错,所以一般mac会直接去掉托盘功能

在这里插入图片描述
否则会报错:
在这里插入图片描述

  • 小案例联系demo

舆情系统 链接: https://pan.baidu.com/s/1_OS_cvY5HYhQfeWGzZiUmw 密码: qp1f

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页