vue-admin-template 简单开启桌面版

安装 vue-cli-plugin-electron-builder 插件

vue add electron-builder
这个过程会安装 electron 6.0.3,这个版本yarn|npm 之淘宝镜像里没有

vue.config.js 配置

module.exports = {
  ...,
  pluginOptions: {
    electronBuilder: {
      outputDir: 'dist_electron',
      // vue-router 路由协议 vue-cli-plugin-electron-builder 自定义了 app:// 协议
      // 打包后的 路由连接地址如: app://./example/table
      // 你可以自定义你自己的协议(src/background.js 里修改), 并将协议名通过 customFileProtocol 设置
      // customFileProtocol: 'myapp://./', 
      builderOptions: {
        appId: 'com.xxxxx.app',
        productName: 'xxxx', // 项目名，也是生成的安装文件名，即 xxxx.exe
        copyright: 'Copyright © 2019', // 版权信息
        directories: {
          output: './dist_electron', // 输出文件路径
          app: `./dist_electron/bundled`
        },
        win: {
          // win 相关配置
          icon: './build/icon.ico', // 图标，当前图标在根目录下，注意这里有两个坑
          target: [
            {
              target: 'nsis', // 利用nsis制作安装程序
              arch: ['x64']
            }
          ]
        },
        nsis: {
          oneClick: false, // 是否一键安装
          allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
          allowToChangeInstallationDirectory: true, // 允许修改安装目录
          installerIcon: './build/icon.ico', // 安装图标
          uninstallerIcon: './build/icon.ico', // 卸载图标
          installerHeaderIcon: './build/icon.ico', // 安装时头部图标
          createDesktopShortcut: true, // 创建桌面图标
          createStartMenuShortcut: true, // 创建开始菜单图标
          shortcutName: 'icon' // 图标名称
        }
      }
    }
  }
}

如果 vue-router 采用 history 模式启动electron 可能会白茫茫-怎么办

https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/commonIssues.html#blank-screen-on-builds-but-works-fine-on-serve

new Vue({
  router,
  render: h => h(App),
  mounted() {
    // Prevent blank screen in Electron builds
    this.$router.push('/')
  }
}).$mount('#app')

src\layout\components\Sidebar\SidebarItem.vue 修改 resolvePath 方法

resolvePath(routePath) {
      if (isExternal(routePath)) {
        return routePath
      }
      if (isExternal(this.basePath)) {
        return this.basePath
      }
      // electron vue-router fix
      if (process.env.IS_ELECTRON) {
        return path.posix.join(this.basePath, routePath)
      } else {
        return path.resolve(this.basePath, routePath)
      }
    }

scripts

yarn electron:build
yarn electron:serve

参考

https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#installation https://www.electron.build/configuration/configuration

PanJiaChen / vue-admin-template

vue-admin-template 简单开启桌面版 #461

安装 vue-cli-plugin-electron-builder 插件

vue.config.js 配置

如果 vue-router 采用 history 模式启动electron 可能会白茫茫-怎么办

src\layout\components\Sidebar\SidebarItem.vue 修改 resolvePath 方法

scripts

参考

PanJiaChen / vue-admin-template

vue-admin-template 简单开启桌面版 #461

安装 vue-cli-plugin-electron-builder 插件

vue.config.js 配置

如果 vue-router 采用 history 模式 启动electron 可能会白茫茫-怎么办

src\layout\components\Sidebar\SidebarItem.vue 修改 resolvePath 方法

scripts

参考

如果 vue-router 采用 history 模式启动electron 可能会白茫茫-怎么办