vue-electron踩坑日记——多窗口界面显示问题

本文仅针对vue-electron库打包后多窗口页面空白(主窗口页面正常显示)的问题解决,如果在主窗口页面就已经无法显示了,请自行百度或参考electron入坑指南

1.问题描述及原因分析

      因项目需要制作一个桌面字幕系统,实现方案是通过主窗口打开字幕窗口显示字幕。在本地测试服务器跑通之后,通过electron-builder打包exe,成功后运行,主窗口一切正常,字幕窗口一片空白。
      因为字幕窗口是无边框的透明窗体,我一度认为是BrowserWindow的配置出现问题,在这折腾半天,后来发现无论我如何修改配置,字幕窗口都是空白页面,忽然明白了不是electron的窗口问题,是vue中的页面代码没有加载出来。于是去修改打包环境的加载url,发现了一个问题——主窗口的页面路由都没有问题,但是其他窗口的路由都失效了。通过思考,我认为electron在打包的时候可能把路由地址访问都换成桌面程序的调转方式,所以访问vue路由地址便无法获取页面,主窗口访问的是html文件,所以能显示,页面跳转也被electron做了处理,而字幕窗口因为是路由访问地址,地址已经被electron处理了,所以自然无法显示页面了。
      想要解决这个问题,就需要给每个窗口都增加一个入口文件,然而,vue默认是SPA(单页面应用),所有交互和界面都在一个页面完成,入口文件当然也只有一个。解决方案是:寻找vue多页面应用的配置,为每一个窗口添加一个入口文件。

demo

2.踩坑过程

     第一步当然是让vue成为多页面应用啦,参考此篇文章用vue构建多页面应用。步骤如下:
        1、在配置文件目录下新增muti-page.config.js

const glob = require('glob');
const path = require('path');
const PAGE_PATH = path.resolve(__dirname, '../src/renderer/page');
const HtmlWebpackPlugin = require('html-webpack-plugin');

exports.entries = function () {
  /*用于匹配 pages 下一级文件夹中的 index.js 文件 */
  var entryFiles = glob.sync(PAGE_PATH + '/*/main.js')
  var map = {}
  entryFiles.forEach((filePath) => {
    /* 下述两句代码用于取出 pages 下一级文件夹的名称 */
    var entryPath = path.dirname(filePath)
    var filename = entryPath.substring(entryPath.lastIndexOf('\/') + 1)
    /* 生成对应的键值对 */
    map[filename] = filePath
  })
  return map
}

exports.htmlPlugin = function () {
  let entryHtml = glob.sync(PAGE_PATH + '/*/index.ejs')
  let arr = []
  entryHtml.forEach((filePath) => {
      var entryPath = path.dirname(filePath)
      var filename = entryPath.substring(entryPath.lastIndexOf('\/') + 1)
      let conf = {
        template: filePath,
        filename: filename + `/index.html`,
        chunks: ['manifest', 'vendor', filename],
        inject: true,
        nodeModules: path.resolve(__dirname, '../node_modules')
      }
      if (process.env.NODE_ENV === 'production') {
        let productionConfig = {
          minify: {
            removeComments: true,         // 移除注释
            collapseWhitespace: true,     // 删除空白符和换行符
            removeAttributeQuotes: true   // 移除属性引号 
          },
          chunksSortMode: 'dependency'    // 对引入的chunk模块进行排序
        }
        conf = {...conf, ...productionConfig} //合并基础配置和生产环境专属配置
      }
      arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}

        2、在webpack.renderer.config.js做以下改动

// 为了避免篇幅过长,删去无关的配置
let rendererConfig = {
 // 将入口改为自定义入口,注意,这里的entries是function,不是object,否则在测试环境会报错
 // entry: {
 //   renderer: path.join(__dirname, '../src/renderer/main.js')
 // },
 entry: entries,
 plugins: [
   new VueLoaderPlugin(),
   new MiniCssExtractPlugin({filename: 'styles.css'}),
   // new HtmlWebpackPlugin({
   //   filename: 'index.html',
   //   template: path.resolve(__dirname, '../src/index.ejs'),
   //   minify: {
   //     collapseWhitespace: true,
   //     removeAttributeQuotes: true,
   //     removeComments: true
   //   },
   //   nodeModules: path.resolve(__dirname, '../node_modules')
   //     // process.env.NODE_ENV !== 'production'
   //     // ? path.resolve(__dirname, '../node_modules')
   //     // : false
   // }),
   new webpack.HotModuleReplacementPlugin(),
   new webpack.NoEmitOnErrorsPlugin()
   // 注释原来的HtmlWebpackPlugin插件代码,在数组后添加.concat(htmlPlugin())
 ].concat(htmlPlugin()),
 output: {
 // 修改filename的[name].js 为[name]/index.js,1、是为了将js文件和html文件归类在一起;2、[name].js时html访问的是绝对路径
   filename: '[name]/index.js',
   libraryTarget: 'commonjs2',
   path: path.join(__dirname, '../dist/electron')
 }
}

        3、渲染目录结构
       在这里插入图片描述
        4、package.json配置,依然参考这篇文章electron入坑指南

"build": {
  "productName": "shorthands",
  "appId": "com.example.shorthands",
  "directories": {
    "output": "build",
    "app": "."
  },
  "files": [
    "./**/*"
  ],
  "dmg": {
    "contents": [
      {
        "x": 410,
        "y": 150,
        "type": "link",
        "path": "/Applications"
      },
      {
        "x": 130,
        "y": 150,
        "type": "file"
      }
    ]
  },
  "mac": {
    "icon": "build/icons/icon.icns"
  },
  "win": {
    "icon": "build/icons/icon.ico"
  },
  "linux": {
    "icon": "build/icons"
  }
}
3、待解决问题

       1、打包后项目过大(应该引入node_modules的问题)
       2、打包成安装包

4、demo

demo

  • 11
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 18
    评论
当需要更新 Vue-Electron 中的 Electron 版本时,我们需要按照以下步骤进行操作。 首先,我们需要确定 Electron 的新版本。我们可以通过查看 Electron 的官方网站(https://www.electronjs.org/)或 GitHub 仓库来获取最新的版本号。 一旦确定了新版本号,我们需要在项目的 package.json 文件中更新 `electron` 的依赖项。找到 `dependencies` 或者 `devDependencies` 部分,并将其对应的依赖项从旧版本更新到新版本。例如,将 `"electron": "^7.0.0"` 更新为 `"electron": "^8.0.0"`。 接下来,运行 `npm install` 命令来安装最新版本的 Electron。这将会自动下载并安装新版本的 Electron。 完成安装后,我们需要确保 Vue-Electron 的一些关键配置也进行了更新。如果在项目中使用了 Vue 的 webpack 模板生成的默认配置,我们需要修改 `build/webpack.base.conf.js` 文件。找到 `externals` 部分,并将 `'electron'` 的值更新为新版本号。例如:`'electron': '@latest'`。 如果项目中使用了 VueCLI 3.x,我们需要在 vue.config.js 文件中进行类似的操作。找到 `configureWebpack` 选项,并将 `externals` 部分的依赖项更新为新版本。 在确保所有必要的更新已经完成后,我们可以重新构建和运行项目,以确保新版本的 Electron 正常工作。可以使用命令 `npm run build` 重新构建项目,并使用 `npm run electron` 或相应的启动命令来启动 Electron。 通过以上步骤,我们可以成功更新 Vue-Electron 中的 Electron 版本,确保项目正常运行并享受最新的 Electron 特性和改进。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值