Vue cli3 cli2 项目 创建electron项目多入口，多模块

情景分析

• 一个electron项目如果是公司的企业项目，一般包含了开启后台master的功能，这样就会带来一些列的问题：

  • 如果将起master直接放再路由里，在开发的时候，热重载会或者刷新（Ctrl + R）这一类操作会造成master掉线的情况；
  • 当同时存在web环境和electron环境时，路由的切换和准备将是一大麻烦事儿！
  • 可能存在一个需求需要不影响当前路由的同时，开启另一个页面进行一系列操作，然后将结果返回，或者接受主路由（主窗口的消息）进行计算和解析并生成结果；
  • …

• 此文目的： 记录一个项目架构，同时能编译出web端和electron端代码，并且electron作为pc端能打开副窗口进行渲染。类似需求：启动页，登录页，加载页（大型应用可能需要加载很多资源，需要等待资源下载完成，同时加载页能有进度显示等等），大型网页或项目需要同时渲染两个模块并能使模块之间正常通信！

准备

• 你需要创建好一个基础项目：

目前我使用的是cli3，但是并不影响这个知识！
脚手架添加好项目后：vue add electron-builder即可自动将项目转换成web和pc双端的代码，运行npm run serve 或 npm run electron:serve即可编译运行。

修改配置：

• cli2

如果你是cli2生成的项目，那么在这个文件下找到webpack.renderer.config.js：

此处的entry是渲染入口，webpack会根据这个入口查找到文件关联，将文件打包和压缩，将工程文件和第三方工具插件分别打包成bundle 和 app 的chunkhash 值文件。

入口的文件路径对应你的包含（new Vue({})）的那个文件，名称不中要，重要的是输出：

找到和modules、entry同级作用域下的plugins,注意它是个数组

首先你要保证你的项目安装了HtmlWebpackPlugin这个插件，这个插件的作用就是打包你的项目，配置项的含义：

filename： 打包之后的文件名称；
title：cli2特有的html模板文件的网页的title，模板文件就是那个 .ejs结尾的那个文件，名称你也可以随意改；
chunks：打包之后的压缩文件开头名称；
template： 打包时你的入口文件（比如main.js）依赖的模板文件；
minify：需要怎么压缩，比如删除空格，删除换行，删除console等等；
默认开发环境会忽略node_modules里的第三方工具，而开发环境build的时候是不会启动项目，直接把文件压缩在一起的，所以配置mode_modules就这样就行。

这样就大功告成了？

• 还有electron的配置：

electron的配置在src/main/index.js里（如果你没有动它的话）

首先： 配置各个窗口加载的文件（其实就是部署的时候你编译好的那些多入口生成的文件）：

按照我之前的配置，开发环境会根据你启动的端口创建服务，这些文件会自动在你设置的输出路径下形成服务：

如果是build web的话，配置的地方和electron一样，只需要更改好entry和plugins就行；

生成的文件就像这样（这个是执行了build：web，electron如果配置了electron-packager会打包成.asar文件，这个文件用electron.exe打开会直接开启像dev运行时候的界面）：

然后你在createwindow的会后将上面的url传入就可以了（这个winURL）就是上面赋值的URL，每个窗口对应那个url

值得注意的是，那些入口文件记得它们一定是一个单独的vue项目文件，有自己的Vue实例！如果你加载的新窗口是原来Vue实例的某个路由，很可能会发生混乱，而且功能耦合严重，不利于日后维护！

• cli3

相比起来，cli3因为尤大大团队对webpack做了优化，默认包含了优秀的webpack配置，而vue.config.js里的配置默认是合并配置，所以，改起来很方便！

首先，cli3生成的electron项目包含默认的electron配置文件是background.js， 自定义的webpack配置需要在根目录新建vue.config.js文件

cli3 配置多入口：

简单的一匹，在导出的对象第一级直接写上pages，键每一项都表示路径，值也表示路径，清晰易懂；

细节：上面的lload/index是为了窗口的url加载出来的时候是localhost:8090/load 而不是 localhost:8090/load.html 如果副窗口有哈希路由，不是index的会出现 localhost:8090/load.html/#/home 这种问题；

load.js:

background.js配置：

process.env.WEBPACK_DEV_SERVER_URL是你的服务localhost:8090地址，端口不要在意。

配置好后在你需要的时候打开你的窗口，加载对应文件地址就行。

runbuild 生成的静态文件可以直接放在服务器部署，以我上面的配置build出来的文件张这个样子：

这样，多窗口，多入口配置算是完成了！

但是你会发现，这样的配置虽然完美运行没有问题，却忽略了一个重要问题！

• 编译运行dev是当前环境下，也就是本地环境，此时的环境里可能和未来编译发布的生产环境有差异，比如编译electron为程序时，"load/index"的操作实际上对于linux内核下来说是不能成功的，build保证能在服务器里跑，所以编译的机制都会按照linux里跑，那么斜杠就是罪魁祸首，矛盾的是，JavaScript语言里只有斜杠代表对象层级，或者用"."，但编译成程序又过不了，因为编译程序在生成路径的时候认不到你这个点是啥！
• 靠谱的解决办法：
  
  cli在输出文件的时候取了文件名，这个文件名就是编译成功之后保存的文件名称，关键点来了，都是字符串传给nodejs的fs模块，我就嘟cil没有做非法字符串或者反斜杠处理，结果一试还真是，那么加上双反斜杠之后，生成路径的时候拼接进去的就是一个带路径的文件名，之所以是反斜杠就是因为控制台和nodejs输出时采用文件系统路径规范，恰好和url和对象路径规范相反！