解决electron-vue build 后static/下资源无法加载问题

由于electron实现原理为chromium + node.js + electronAPI，所以运行的时候是以chromium浏览器为操作界面，node提供服务，以及调用electron提供的系统API的软件。

---

electron-vue的界面渲染目录(src/renderer/),，使用的是和vue-cli基本一致的目录结构，static目录路径也和vue-cli一致。一般来说进行这几部操作：

1. 直接把原有的vue-cli项目下的src下的文件复制到src/renderer/下；
2. 把原项目static文件夹下的文件也复制到static下；
3. 在webpack.renderer.config.js下，像vue-cli里面一样设置路径别名： 'static':path.resolve(__dirname, '../static')
4. 运行npm run dev

就可以看到原来vue-cli的项目了。

但是这样预览，其实是运行了一个Webpack DevServer，然后electron界面显示了此devServer的页面，所以static目录下的文件可以正常加载。
但如果运行npm run build后，在build/win-unpacked/目录下运行****.exe就会发现有很多资源无法加载,还有可能直接显示白屏等等问题。

---

这就是这次咋们要解决的问题了，为什么dev的时候好好的,到了build就出问题了呢,我们看看electron的官方文档就知道，原来在开发和产品阶段static的路径是不一致的，所以使用webpack配置的路径别名也就不能生效了。
这里官方贴心的提供了一个__static的全局变量 （两个下划线开头），可以用来替代需要static的地方，例如：

 //vue-cli写法
 b.style.background = 'url(static/bgimg/')' 
 //electron-vue写法
 b.style.background = 'url(' + __static + '/bgimg/')' 

这样再运行npm run build (有时候需要运行一下npm run build:clean进行清理) 后打开.exe文件就能正确加载__static下的资源了。

---

如果dev或者web环境下__static变量解析不正确，只需要自行修改对应运行环境下的__static变量值就行了，例如dev环境下的__static应该改为：

//.electron-vue/webpack.renderer.config.js

if (process.env.NODE_ENV !== 'production') {  //非最终产品环境,这里即为dev环境
  rendererConfig.plugins.push(
    new webpack.DefinePlugin({
      // '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
      '__static': JSON.stringify('./static')
    })
  )
}