electron的extraFiles和extraResources的配置和使用（附：动态路径拼接问题）

一、process.cwd()

process.cwd()可以获取Node.js进程当前的工作目录，开发时获取到的是项目根目录，打包后获取到的是应用程序根目录，也就是说无论什么环境，都可以精准无误的访问到根目录

二、path.join()方法

path模块是Node.js的内置模块，path.join()可以将多个路径拼接到一起

const path = require('path')
path.join('/a/b/c','/d')  // '/a/b/c/d'

三、extraFiles

extraFiles是打包额外文件配置项，配置extraFiles后，electron-builder在打包时会将指定文件夹复制到打包后应用程序的根目录下(Windows/Linux)，或者Content目录下(MacOS)

3.1. 如何配置extraFiles

• 根目录新建lib文件夹，这里用来存放你的资源

• vue.config.js中配置extraFiles

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        // 额外文件配置
        extraFiles: ["./lib"],
      },
    },
  },
});

打包后lib文件夹会被复制到打包后应用程序的根目录下(Windows/Linux)，或者Content目录下(MacOS)

• 如图（我是Windows系统）
  

3.2. 如何访问lib文件夹下的资源

使用process.cwd()可以获取Node.js进程当前的工作目录，也就是lib文件夹所在目录，那么extraFiles的目录路径地址就是，开发环境同样适用

path.join(process.cwd(),'/lib/你的文件名字')

四、extraResources

extraResources是打包额外资源配置项，配置extraResources后，electron-builder在打包时会将指定文件夹复制到打包后应用程序的根目录/resources文件夹下(Windows)，或者Content/resources文件夹下(MacOS)

4.1. 如何配置extraResources

• 根目录新建lib文件夹，这里用来存放你的资源

• vue.config.js中配置extraResources

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        // 额外资源配置
        extraResources: ["./lib"],
      },
    },
  },
});

打包后lib文件夹会被复制到打包后应用程序的根目录/resources文件夹下(Windows)，或者Content/resources文件夹下(MacOS)

• 如图（我是Windows系统）
  

4.2. 如何访问lib文件夹下的资源

多拼接一层resources即可开发环境同样适用

path.join(process.cwd(),'/resources/lib/你的文件名字')