electron-vue利用webpack打包实现多页面的入口文件问题

Electron多页面配置背景

在Electron项目中，有时需要新打开一个窗口。若使用Webpack作为静态资源打包工具，可以配置多页面入口。本文将分享在Electron中利用Webpack建立多页面入口时的实践经验与常见问题。

Webpack核心概念回顾

1、webpack的核心概念

•Entry：入口，Webpack执行构建的第一步从Entry开始； •Module：模块，在Webpack里一切皆模块，一个模块对应着一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。 •Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割。 •Loader：模块转换器，用于把模块原内容按照需求转换成新内容。 •Plugin：扩展插件，在Webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。 •Output：输出结果，在Webpack经过一系列处理并得出最终想要的代码后输出结果。

配置多页面入口文件

2、配置多页面的入口文件

Electron构建后的项目目录结构如下：

创建新页面

•创建新的页面

由vue-cli生成的项目通常只有一个main.js主入口来处理所有Vue页面。若需创建多个页面，需要为每个页面生成对应的JS文件，用于保存该页面包含的内容。

配置多页面入口

•配置多页面的入口文件

由electron-vue创建的项目包含三个Webpack配置文件。主要在webpack.renderer.config中配置多个入口，以生成多页面的入口文件，具体代码如下：

Webpack中的HtmlWebpackPlugin插件用于简单创建HTML文件以供服务器访问。必须在新建HtmlWebpackPlugin实例时指定chunks属性，否则无法识别入口，导致页面加载失败。

新建窗口访问页面

•electron中新建窗口，访问新生成的页面

在Electron中，src目录下的main文件中的index.js作为主进程。在该文件中新建窗口，并调用新生成的HTML文件，具体代码如下：

const dialpadUrl = process.env.NODE_ENV === 'development'
 ? `http://localhost:9080/dialpad.html`
 : `file://${__dirname}/dialpad.html`

创建新窗口时打开页面的地址。Electron的win.loadURL(url[, options])中的加载文件方式包含以下选项：

•httpReferrer：一个HTTP Referrer url •userAgent 发起请求的 userAgent •extraHeaders：用”\n“分割的额外标题 •baseURLForDataURL：要加载的数据文件的根URL(带有路径分隔符)，只有当指定的url是一个数据url并需要加载其他文件时，才需要这样做

实际上这些参数的具体用途可能较为复杂，但根据理解，url加载的通常只能是远程地址（如http://）或是本地的HTML文件路径（file://）。

参考文章： segmentfault.com/a/119000001…

打包报错与解决

•打包报错

上述即为在electron-vue中利用Webpack实现多页面入口的全过程。但在最后打包时出现了错误，错误代码如下：

经搜索发现，这通常是由于Node内存溢出导致。解决方法是在package.json中手动设置Node的内存大小限制即可。

"scripts": {
  "buildAll": "node --max-old-space-size=4096 .electron-vue/build.js && electron-builder",
  "build": "node --max-old-space-size=4096 .electron-vue/build.js && electron-builder --win --  ia32 --publish always",
  "build:dir": "node --max-old-space-size=4096 .electron-vue/build.js && electron-builder -- win --ia32 --dir",
  "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
  "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
  "dev": "node --max-old-space-size=4096 .electron-vue/dev-runner.js",
  "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
  "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
  "pack": "npm run pack:main && npm run pack:renderer",
  "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-  vue/webpack.main.config.js",
  "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config      .electron-vue/webpack.renderer.config.js"
},

总结

以上所述是小编给大家介绍的electron-vue利用webpack打包实现多页面的入口文件问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！