在文本中,苏南大叔想和大家聊聊electron-vue中的__static变量。当然,在前面的文章中,苏南大叔已经描述过__static__dirname了。在本文中,苏南大叔就继续深入描述探讨一下electron-vue中的__static变量。描述的方向主要是:哪里定义的__static__static生效范围是什么?最终__static是如何使用的?

苏南大叔:深入对比理解 electron-vue 中的 __static 变量的生效途径 - electron-vue-static
深入对比理解 electron-vue 中的 __static 变量的生效途径(图6-1)

本文的测试环境是:mac/electron-vue

__static代表着./static/

无论是在electron_vue的主进程中,还是在渲染进程中,无论是开发模式,还是生产模式,__static在默认情况下,都代表着根目录下面的static目录。

苏南大叔:深入对比理解 electron-vue 中的 __static 变量的生效途径 - static-folder
深入对比理解 electron-vue 中的 __static 变量的生效途径(图6-2)

electron-vue的文档中,有个关于这个目录的描述,具体见下面这个连接。

一般来说,一些静态文件,譬如图片等,就需要放到这个目录下面。但是,electron-vue也明确说明了,一些静态文件并不适合放在这个目录下面,因为一旦打包之后,这个static目录,会被打包到asar里面,例如shell.openItem()的一些函数,就会无法读取到相关文件。

但是,electron-vue就不致力于解决这个问题了。下面的链接是苏南大叔以前写过的一篇相关文字。

An alternative method to this situation would be to configure electron-packager/electron-builder to set specific files to "unpack" from the asar archive in production. electron-vue has no plans to support this method; any issues related to this or how to set this up will be closed.

主进程中的__static

从代码层面上来说,__static./static/的转变,却是有很多相关代码,从不同的场景下,维护从__static./static/的转变。

开发模式的主进程

electron_vue在开发模式下,实际上执行的是webpackwebpack-dev-server服务器。那么,关于主进程,__static被定义于下面的文件中:

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

if (process.env.NODE_ENV !== 'production') {
  mainConfig.plugins.push(
    new webpack.DefinePlugin({
      '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
    })
  )
}

苏南大叔:深入对比理解 electron-vue 中的 __static 变量的生效途径 - webpack-main-config
深入对比理解 electron-vue 中的 __static 变量的生效途径(图6-3)

生产模式的主进程

文件被定义于src/main/index.js,但是因为有个build的过程,实际上生效的位置是:dist/electron/main.js

src/main/index.js

if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

苏南大叔:深入对比理解 electron-vue 中的 __static 变量的生效途径 - main-index-js-static
深入对比理解 electron-vue 中的 __static 变量的生效途径(图6-4)

使用范例

var _path = `${__static}/logo.png`;

渲染进程中的__static

在渲染进程中,同样也存在着调试模式和渲染模式的问题。

调试阶段的渲染进程中的__static

webpack.renderer.config.js:

if (process.env.NODE_ENV !== 'production') {
  rendererConfig.plugins.push(
    new webpack.DefinePlugin({
      '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
    })
  )
}

苏南大叔:深入对比理解 electron-vue 中的 __static 变量的生效途径 - webpack-renderer
深入对比理解 electron-vue 中的 __static 变量的生效途径(图6-5)

生产阶段的渲染进程中的__static

/src/index.ejs:

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

苏南大叔:深入对比理解 electron-vue 中的 __static 变量的生效途径 - src-index-ejs
深入对比理解 electron-vue 中的 __static 变量的生效途径(图6-6)

使用范例

<img id="logo" src="~@/assets/logo.png" alt="electron-vue">
<script>
console.log(__static);
</script>

其中的@vue中定义的另外一个变量,代表着根目录。其基本用法,并不在本文讨论范围内。上述例子中,对于html路径中国的assets,是直接填写的路径,并没有使用__static变量,请知晓。

asar__static的影响

asar__static是有影响的,区别就是:
/app.asar/dist/electron/static/app/dist/electron/static

注意:下面的值,均测量自mac系统。

asar模式下,相关的值为:

/my-project.app/Contents/Resources/app.asar/dist/electron/static

asar模式下,相关的值为:

/my-project.app/Contents/Resources/app/dist/electron/static

切换asar的方式:

electron-vue+builder:

package.json:

{
//...
  "build": {
    "asar":false,
    //...
  }
//...
}

electron-vue+package:

.electron-vue/build.config.js:

module.exports={
//...
arar:false,
//...
}

总结

一个小小的__static变量,居然有这么多的变化,始料未及吧?想知道更多的苏南大叔关于electron的理解么?请点击下面的链接查看:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron    vue

本站的忠实读者小伙伴,正在阅读下面这些文章: