• Vue-Electron初始化项目及打包


    Vue版本

    选用Vue3npm i @vue-cli

    初始化项目

    vue create demo

    则会在demo目录下创建Vue项目

    vue add electron-builder

    增加打包软件

    然后其实就可以运行项目了,我们选择用yarn

    打包问题

    其实就是本文的核心重点,一开始要么是报Electron安装错误,要么就是nsis有问题,我们需要配置npmrc

    electron_mirror=https://npm.taobao.org/mirrors/electron/
    electron-builder-binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
    
    • 1
    • 2

    然后就能打包成功

    打包完丢样式

    因为我用的是iview,打包后所有的icon都丢了

    vue.config.js增加这三行代码

     customFileProtocol: "./",
          publicPath: './',
          assetsDir: "./",
    
    • 1
    • 2
    • 3

    提供完整的vue.config.js

    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
      transpileDependencies: true,
      pluginOptions:{
        electronBuilder:{
          customFileProtocol: "./",
          publicPath: './',
          assetsDir: "./",
          nodeIntegration:true,
          files: ['./node_modules'],
          builderOptions: {
            asar: true,
            nsis: {
              oneClick: false, // 是否一键安装
              allowElevation: true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
              allowToChangeInstallationDirectory: true, // 允许修改安装目录
              // installerIcon: '', // 安装图标
              // uninstallerIcon: '', //卸载图标
              // installerHeaderIcon: '', // 安装时头部图标
              // shortcutName: '', // 图标名称
              createDesktopShortcut: true,
              createStartMenuShortcut: true
            },
            win: {
              icon: './Goldbrick.ico', // 打包后的应用图标 public 目录下的图标  注意图标最小255 * 255,否则打包会报错
              artifactName: 'Goldbrick_${version}.${ext}', // 打包后的执行文件名称
              // artifactName: 'chain-desktop_setup_${version}.${ext}', // 打包后的安装包名称
              target: ['nsis', 'zip'] // 打包成安装包和免安装版
            },
            mac: {
              icon: './public/app.jpg'
            },
            productName: 'Goldbrick_v0.0.1' // 应用名称
          }
        }
      },
      publicPath: './', // 公共路径 如果放在服务器下的 admin 目录下 就配置 './admin'
      // outputDir: 'chain', // 打包后的目录名
      productionSourceMap: false, // 打包后不要sourcemap
      chainWebpack: config => {
        config.plugins.delete('prefetch')
        config.plugins.delete('preload');
      },
      css: {
        loaderOptions: {
          sass: {
            // prependData: `@import "@/assets/style/base.scss";`
          },
        },
      },
    })
    
    
    • 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
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
  • 相关阅读:
    分析大疆官网根据ip自动跳转到指定域名
    Tableau可视化分析:深入理解数据结构及字段处理方法
    手把手带你搭建个人博客系统(一)
    基于Thrift的分布式Hive数据源连接器
    Revit中模型填充图案与绘图填充图案的区别
    听完我的建议,Linux将不再困难
    SQL语法之DML、DQL和DCL语句
    场景应用:如何设计一个分布式系统?
    nuxt3项目使用pdfjs-dist预览pdf
    Unity 3D 动画系统(Mecanim)|| Unity 3D 人形角色动画(Avatar)
  • 原文地址:https://blog.csdn.net/qq_36324958/article/details/133301991