Electron本地文件引用问题,并打包在项目中使用

Ta有点烦
10,661 阅读3分钟

介绍

5月初接到公司要开发直播app的需求,了解到具体需求,主播端的功能使用桌面应用开发,才能满足所有需求,于是乎想到了electron.就这样开始了踩坑路!

比你想象的更简单

如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。

在学习了几天文档,看了腾讯云音视频文档,好在官网提供了Electron Demo,再git上逛了逛,找到了**vue-cli-electron-template**模板,并在此基础上进行开发.

正文

把官方electron Demo复制过来后,发现音频测试播放部分不能用,为了解决这个问题,查看了一些文档,最终找到了相关解决办法

  1. 模本中提供了一个名为 __static 的全局变量，它将产生一个指向 public/ 目录的正确路径。
  2. electron中提供了一个名为 process.resourcesPath 的全局变量，它表示资源目录路径。
  • 首先我在public目录中新建了一个resources目录，resources目录我们用来放一些需要打包在应用内的资源,供本地读取,可以放图片,视频,音频,文本等文件
  • 我们修改一下vue.config配置,主要添加以下这段代码,在打包的时候把/public/resources文件里的资源,移动到打包后的resources目录中
extraResources: {
      from: './public/resources',
      to: './'
}

  • vue.config.js完整配置

    const path = require('path')

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: './',
  assetsDir: 'assets',
  outputDir: 'dist',
  devServer: {
    // can be overwritten by process.env.HOST
    host: '0.0.0.0',
    port: 7895
  },
  chainWebpack: config => {
    // 路径别名，如用“@”指代“src”等
    // Path alias, such as "@" for "src", etc.
    config.resolve.alias
      .set('@', resolve('src'))
      .set('src', resolve('src'))
      .set('static', resolve('src/assets'))
      .set('views', resolve('src/views'))
      .set('svg', resolve('src/assets/svg'))
      .set('components', resolve('src/components'))
    // svg config
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule.use('svg-sprite-loader').loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        extraResources: {
          from: './public/resources',
          to: './'
        },
        win: {
          icon: './public/app.ico'
        },
        mac: {
          icon: './public/app.png'
        },
        productName: 'vue-cli-electron-template'
      }
    },
    // i18n config
    i18n: {
      locale: 'zh',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: false
    }
  }
}

  • 修改一下package.json,主要修改"go": "vue-cli-service electron:serve --mode development"这条,增加--mode development,用来判断开发环境,当然你也可以根据其他条件判断,只是一个判断依据

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "go": "vue-cli-service electron:serve --mode development",
    "packapp": "vue-cli-service electron:build",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  }
  • 完整的package.json配置
{
  "name": "vue-cli-electron-template",
  "version": "0.2.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "go": "vue-cli-service electron:serve --mode development",
    "packapp": "vue-cli-service electron:build",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "core-js": "^3.6.4",
    "svg-sprite-loader": "^4.2.1",
    "vue": "^2.6.11",
    "vue-i18n": "^8.15.5",
    "vue-router": "^3.1.6",
    "vuex": "^3.1.3"
  },
  "devDependencies": {
    "@intlify/vue-i18n-loader": "^0.6.1",
    "@vue/cli-plugin-babel": "~4.2.3",
    "@vue/cli-plugin-eslint": "~4.2.3",
    "@vue/cli-plugin-router": "~4.2.3",
    "@vue/cli-plugin-vuex": "~4.2.3",
    "@vue/cli-service": "~4.2.3",
    "@vue/eslint-config-standard": "^5.1.2",
    "axios": "^0.19.2",
    "babel-eslint": "^10.1.0",
    "electron": "^8.1.1",
    "electron-log": "^4.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "vue-cli-plugin-axios": "~0.0.4",
    "vue-cli-plugin-electron-builder": "~1.4.6",
    "vue-cli-plugin-i18n": "~0.6.1",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/recommended",
      "@vue/standard"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "__npminstall_done": false
}

  • 开发中你可以这样判断正确的读取本地静态资源

    let testBasePath = '' // eslint-disable-line no-unused-vars
switch (process.env.NODE_ENV) {
  case 'development':
    testBasePath = path.join(__static, '/resources') // eslint-disable-line no-undef
    break
  case 'production':
    testBasePath = process.resourcesPath // 生产环境
    break
}
const file = fs.readFileSync(path.join(testBasePath, 'testspeak.mp3'))

img

欢迎大家一起学习讨论!

avatar
文章
阅读
粉丝