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

项目需要在电子的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在电子中利用webpack建立多页面入口的踩坑经验。

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

电子构建后的项目目录如下:

& # 8226;创建新的页面

vue-cli生成的项目中只有一个main.js主入口的js文件来处理所有的vue页面,我们创建多个页面需要生成一个这个页面相对应的js文件,保存该页面中包含的内容。

& # 8226;配置多页面的入口文件

electron-vue创建的项目中有三个webpack的配置,我主要是在webpack.renderer.config中配置多个入口,生成多页面的入口文件,代码如下:

webpack中的HtmlWebpackPlugin插件是用来简单创建HTML文件,用于服务器访问。必须在新建HtmlWebpackPlugin中写块,不然无法识别,页面加载不出来
　　

& # 8226;电子中新建窗口,访问新生成的页面

电子中src的主要文件中的指数。js为主进程,在该页面中新建窗口,调用新生成的HTML文件,代码如下:
　　

　　　　　　const dialpadUrl=process.env。NODE_ENV==='发展' 　　& # 63;“http://localhost: 9080/dialpad.html” 　　:“文件://$ {__dirname}/dialpad.html ' 　　　　

创建新窗口打开页面的地址.electron的<代码>赢。loadURL (url[选项])中的加载的文件方式包含:

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

其实我也没太懂这些都是什么,反正据我理解,url加载的只能是远程地址(如http://)或是本地的HTML文件路径(文件://)

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

& # 8226;打包报错

上述就是我在electron-vue中利用webpack实现多页面入口的全过程,不过最后打包时出现了错误,错误代码如下:

上网搜了一下,说的是节点内存溢出的问题,在package.json中手动设置节点的内存大小就可以啦

　　　　　　"脚本":{ 　　:“buildAll节点——max-old-space-size=4096 .electron-vue/构建。js和,electron-builder”, 　　“构建”:“节点——max-old-space-size=4096 .electron-vue/构建。js和,electron-builder——赢得ia32——发布”, 　　“构建:dir”:“节点——max-old-space-size=4096 .electron-vue/构建。js和,electron-builder赢——ia32 dir”, 　　“构建:清洁”:“cross-env BUILD_TARGET=清洁节点.electron-vue/build.js”, 　　“构建:web”:“cross-env BUILD_TARGET=网络节点.electron-vue/build.js”, 　　“开发”:“节点——max-old-space-size=4096 .electron-vue/dev-runner.js”, 　　“棉絮”:“eslint, ext js。vue - f。/node_modules/eslint-friendly-formatter src”, 　　“线头:修复”:“eslint, ext js。vue - f。/node_modules/eslint-friendly-formatter——修复src ", 　　“包装”:“npm运行包:主要,,npm运行包:渲染器”, 　　:“包:主要cross-env NODE_ENV=生产webpack——发展——颜色——配置.electron vue/webpack.main.config.js”, 　　“包:渲染器”:“cross-env NODE_ENV=生产webpack——发展——颜色——配置.electron-vue/webpack.renderer.config.js” 　　}, 　　　　

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