electron-vue打包static文件丢失问题处理

electron-vue偶尔会使用到一些外部文件，这些文件不需要经过vue打包，仅仅是一些静态文件，一般来说我们将他们放在static文件夹下，但是经过electron打包之后，发现会报错，或者打包之后引不到这些文件。搜索关键词之后得到的解释也寥寥无几，没办法只有硬着头皮上。
最开始我在index.ejs文件中直接引入js文件，打包之后发现引入失败

<script src="../static/js/xxx.js>"></script>

问题在哪呢？实际上electron打包之后路径发生了改变，网上有文章指出，在打包之后的build/win-unpacked文件夹下复制粘贴static就可以解决问题，但是我认为这种方法并不明智，打包为安装包不久全炸了....
随后从搜索中得知，electron提供了一个全局变量__static，这个变量就是我们需要的路径地址，同时在index.ejs文件中我们也发现了__static的身影。

<% if (!process.browser) { %>
      <script>
        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
      </script>
<% } %>

首先，这段代码有点奇怪，他有点像php加js的杂合体，这个玩意儿叫ejs，是个模板工具，这里可以看到我们需要把dirname和/static组合起来，但是怎么写代码呢？

<script src="<%= (process.env.NODE_ENV !== 'development')?(__dirname+'/static/js/xxx.js'):'../static/js/wangEditer.js' %>"></script>

这样写并不能实现，发现控制台报错，__dirname is not defined，瞬间卧槽，全局变量为毛未定义，仔细思考一下，ejs这玩意是模板引擎，在index运行之前就运行ejs了，那么在那之前应该从哪入手呢？
从网上资料可以发现，大部分内容改动都是在.electron-vue的webpack.renderer.config.js中修改参数，那我们来看看这个文件在干嘛

/**
 * Adjust rendererConfig for production settings
 */
if (process.env.NODE_ENV === 'production') {
  rendererConfig.devtool = ''

  rendererConfig.plugins.push(
    new BabiliWebpackPlugin(),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/electron/static'),
        ignore: ['.*']
      }
    ]),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    })
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  )
}

emmm，既然我们拿不到__dirname，那我们就创建一个嘛！

/**
 * Adjust rendererConfig for production settings
 */
if (process.env.NODE_ENV === 'production') {
  rendererConfig.devtool = ''
  let realstaticpath = path.join(__dirname, './static').replace(/\\/g, '\\\\')
  rendererConfig.plugins.push(
    new BabiliWebpackPlugin(),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/electron/static'),
        ignore: ['.*']
      }
    ]),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.DefinePlugin({
      '__dirname': realstaticpath
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  )
}

这样我们就通过realstaticpath拿到了路径了，最后再来试试，emmmm然而还是报错，这次提示E：。。。。。。巴拉巴拉，看上去是ejs把我们的地址参数当成了变量，然后就炸了，那么再来

/**
 * Adjust rendererConfig for production settings
 */
if (process.env.NODE_ENV === 'production') {
  rendererConfig.devtool = ''
  let realstaticpath = path.join(__dirname, './static')
      .replace(/\\/g, '\\\\')
  rendererConfig.plugins.push(
    new BabiliWebpackPlugin(),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/electron/static'),
        ignore: ['.*']
      }
    ]),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.DefinePlugin({
      '__dirname': "'"+realstaticpath+"'"
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  )
}

这样总算没问题了，成功通过打包，然而console提示找不到文件，这里我修改成这样就没问题了，欢迎大佬指出问题所在。

/**
 * Adjust rendererConfig for production settings
 */
if (process.env.NODE_ENV === 'production') {
  rendererConfig.devtool = ''
  let realstaticpath = path.join(__dirname, '../build/win-unpacked/resources/app.asar/dist/electron/static')
      .replace(/\\/g, '\\\\').replace(/\\/g, '\\\\')
  rendererConfig.plugins.push(
    new BabiliWebpackPlugin(),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/electron/static'),
        ignore: ['.*']
      }
    ]),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.DefinePlugin({
      '__dirname': "'"+realstaticpath+"'"
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  )
}