使用静态资源

如果你曾经使用过官方的 vuejs-templates/webpack, 你应该会熟悉 static/ 目录. 该目录下放置的文件, 可以被 main 和 renderer 进程消费. 在你的 Vue应用 中来使用这些资源很简单, 但是 fs 和其他需要使用完全路径的模块则有些麻烦. 还好, electron-vue 提供了 __static 变量来输出到 static/ 的路径, 可以在 开发环境及生产环境 中使用.

用例: Vue组件中使用 src 标签

假如我有一个加载图片的组件, 但是图片路径只有在某个任务完成后才能获得. 简便起见, 我们来使用 data 变量来绑定 <img>‘s 源.

SomeComponent.vue

  1. <template>
  2.   <img v-bind:src="imageUrl">
  3. </template>
  5. <script>
  6.   export default {
  7.     data () {
  8.       // notice the url starts with `static/`
  9.       return { imageUrl: 'static/imgs/unsplash.png' }
  10.     }
  11.   }
  12. </script>

这里 webpack 并不会把 unsplash.png 打包, 而 应用程序 会在 static/imgs/unsplash.png 下查找相关内容. 多亏了 vue-loader, 剩余工作都已经做好了.

JS之fs,path,__static 用例

假如我们需要在我们的应用程序中使用 fs 来读取某个资源文件, 那么我们在开发环境及生产环境中如何访问到 static 的真实目录呢? electron-vue 提供了一个全局变量 __static 来映射到 static/ 的正确目录. 接下来我们展示如何 在开发环境及生产环境中使用它来读取一个文件.

static/someFile.txt

  1. foobar

SomeFile.js (main or renderer process)

  1. import fs from 'fs'
  2. import path from 'path'
  4. let fileContents = fs.readFileSync(path.join(__static, '/someFile.txt'), 'utf8')
  6. console.log(fileContents)
  7. // => "foobar"

请谨记在生产环境中,所有文件默认会使用高度推荐的 asar 来打包. 鉴于此, static/ 下的所有资源都只能在 electron 中访问. 所以如果你计划要发布可以被 其他程序 读取的资源时, 你应该首先从你的 应用程序 复制这些资源到用户空间或者桌面, 然后你就可以使用 shell.openItem() 来打开这些资源.

另一个解决方法可以在生产环境中通过配置 electron-packager/electron-builder 来指定可以从 asar包中解压的资源. electron-vue 并不计划支持这种方法; 所有涉及到此或者如何设置的问题都会被关闭的.