Electron-vue爬坑之旅

(1)初始化一个基于Electron-vue搭建的项目，可以一路回车到创建完毕，默认支持Eslint

vue init simulatedgreg/electron-vue my-electron

创建之后的目录是这样的

（2）进入项目根目录，分别执行npm install与npm run dev
如果你看到这个界面说明项目创建成功了

（3）**主进程与渲染进程：**在目录src下，有main文件夹和renderer文件夹以及index.ejs,
main：主进程，里面的index.js会进行一些桌面端窗口大小、调试工具tools的开启等设置
renderer：渲染进程，vue相关代码会放在这里,该安装啥依赖就正常安装就行
index.ejs：类似于vue项目的index.html
（4）package.json，目前我就常用npm run build:clean与npm run build,前者是清除上次打包产生的文件，后者是新打包，我一般会先执行npm run build:clean，再执行npm run build(好像直接直接npm run build也没啥影像)

（4）爬坑之旅：
（1）如何打包？
先npm run build:clean，再npm run build
我的是mac，打包dmg还是挺顺利的，没遇到什么坎
我还一台windows，打包windows的exe也是一路顺畅
但是根据网上说的在mac上打包exe没有成功（说是在package.json里配置win32命令就可以在max上打包exe程序，我是没尝试成功，因为总有一些包是下载不成功的），还有我同事的windows打包exe也没成功，一直缺包。
我同事的windows打包exe,直接执行npm run build的时候，会有很多依赖包在国内会下载失败导致打包不成功，不过有个思路能解决此问题，那就是：缺啥补啥
把缺的文件从网上单独找资源下载下来，放在系统的cache里，这样打包下载依赖的时候会优先从系统cache里找，找不到才去下载，所以cache里放全了，也就能打包了。
windows用户放在users/xxx/AppData/Local/里，Local里有electron文件夹和electron-builder文件夹，electron只要全局安装过会存在此文件夹，electron-builder没有文件夹则手动创建一个，里面放一个Cache文件夹，Cache文件夹里放nsis和winCodeSign两个文件夹，这两个文件夹的内容在网上都可以下载到，打包的时候报错会显示版本号，只需要把文件版本号改成相应的就好。
一定注意：路径不要有中文，会报错
（2） 如何开启打包后的调试工具？如何在打开软件时默认最大窗口？
在src/main/index.js中的createWindow方法里加上mainWindow.webContents.openDevTools()开启打包后调试工具,mainWindow.maximize()，啥？小白一枚不知道咋放？来吧，上图：

（3）如何弹窗打开一个外链窗口并居中，用window.open
首先在src/main/index.js的webPreferences里配置：nativeWindowOpen:true

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nativeWindowOpen: true,
      nodeIntegration: true,
      webviewTag: true
    }
  })
  mainWindow.maximize()
  mainWindow.loadURL(winURL)
  mainWindow.webContents.openDevTools()
  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

在某个点击事件里加入弹窗逻辑：

let time = new Date().getTime() // 加时间戳为了每次都能打开相同名称的窗口
var url = `https://www.baidu.com?&time=${time}` // 转向网页的地址;
var name = 'viewDcm' // 网页名称，可为空;
var iWidth = 1025 // 弹出窗口的宽度;
var iHeight = 800 // 弹出窗口的高度;
// 获得窗口的垂直位置
var iTop = (window.screen.availHeight - 10 - iHeight) / 2
// 获得窗口的水平位置
var iLeft = (window.screen.availWidth - 10 - iWidth) / 2
window.open(url, name, 'height=' + iHeight + ',,innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no')

（4）如何开启webview，在vue页面里嵌入网页？
首先在src/main/index.js里，开启webview标签：webviewTag:true，在上面文章的前一个图中的代码里可以看到这个设置
在任何你想放的位置，放webview标签即可，当普通标签用。

<webview id="wb" src="https://www.baidu.com"/>

（5）dev开发时正常，打包后找不到static里的静态资源（主要是第三方的js）？
尝试了网友的各种办法，什么设置别名static或者全局变量__static都不可以，最后还是靠把js放到renderer里解决的，打包后还是提示找不到，这就需要自己查看控制台的路径，决定是否需要也在static下放该静态文件，然后通过拷贝命令拷贝到打包后的dist目录里
webpack.renderer.config.js

/**
 * Adjust rendererConfig for production settings
 */
if (process.env.NODE_ENV === 'production') {
  rendererConfig.devtool = ''
  rendererConfig.plugins.push(
    new MinifyPlugin(),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/electron/static'),
        ignore: ['.*']
      }
    ]),
    new CopyWebpackPlugin([ // 将static下的dcm文件夹拷贝到打包后的dist的某目录下
      {
        from: path.join(__dirname, '../static/dcm'),
        to: path.join(__dirname, '../dist/electron/src/renderer/common'),
        ignore: ['.*']
      }
    ]),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  )
}

（6）如何更换应用图标icon？
让UI给做几个图，分别是256x256.png，1024x1024的icon.icns，256x256的icon.ico，做好后直接替换build文件夹下的icons对应文件
如果自己改了图标名称，还需要修改package.json下的图标路径

"mac": {
   "icon": "build/icons/icon.icns"
 },
 "win": {
   "icon": "build/icons/icon.ico"
 },
 "linux": {
   "icon": "build/icons"
 }

如果图标替换没成功，一定要UI去确认给的ico或icns格式是否正确，或者去网上随便下载一个对应格式的图标，替换上去看看是否能成功，如果网上下载的可以成功，说明你们UI给的格式不对。（此处流泪半小时，我就因为UI给的icns不标准，导致我调试了大半天的图标替换）
（7）vue-cli3创建的项目不支持CommonJs规范？不支持exports？exports为undefined?
修改.bebelrc文件，将renderer下的modules：false注释掉

"renderer": {
    "presets": [
      ["env", {
        // "modules": false
      }],
      "stage-0"
    ]
  }