Electron环境下解决Vue3前端获取文件绝对路径的疑惑

2023-05-04 18:16:17

Electron 环境下 Vue.js 获取文件绝对路径指南

认识 Electron 环境的特殊性

Electron 是一款跨平台桌面应用开发框架，允许开发者使用 Web 技术创建可以在 Windows、macOS 和 Linux 等多个平台上运行的应用程序。与传统的浏览器环境不同，Electron 应用程序可以访问本地文件系统，这使得获取文件绝对路径成为可能。

理解 Electron 中使用 Node.js 的注意事项

Electron 使用 Node.js 作为底层运行时，这意味着我们可以直接在 Electron 应用程序中使用 Node.js API 来操作文件系统。但要注意，在 Electron 5.x 及以上版本中，默认禁用了对 Node.js 的集成，因此我们需要显式地开启它。

开启 Electron 中的 Node.js 集成

要开启 Electron 中的 Node.js 集成，请在 Electron 应用程序的主进程文件中添加以下代码：

const {app} = require('electron')

app.on('ready', () => {
  app.commandLine.appendSwitch('enable-node-integration')
})

使用 Electron API 获取文件绝对路径

在 Electron 应用程序中，我们可以使用 electron 模块提供的 dialog API 来打开文件管理器并获取用户选择的文件的绝对路径。具体步骤如下：

导入 electron 模块：

const {dialog} = require('electron')

调用 dialog.showOpenDialog() 方法打开文件管理器：

const files = dialog.showOpenDialogSync({properties: ['openFile']})

获取用户选择的文件的绝对路径：

const filePath = files[0]

通过这些步骤，我们可以获取用户在 Electron 应用程序中选择的文件的绝对路径。

常见问题及解决方案

问题：在 Vue 组件中使用 electron 模块时，提示 "window.require is not a function" 错误。
解决方案： 确保在 Electron 应用程序中启用了 Node.js 集成。
问题：在 Electron 应用程序中打开文件管理器时，没有弹出文件管理器窗口。
解决方案： 确保在 Electron 应用程序的 package.json 文件中添加了 "main" 字段，并指定了 Electron 应用程序的主进程文件。
问题：在 Electron 应用程序中获取的文件路径不正确。
解决方案： 确保在使用 dialog.showOpenDialog() 方法时，正确设置了 "properties" 选项。

代码示例

在 Vue 组件中获取文件绝对路径的示例代码如下：

import { ref } from 'vue'
import { dialog } from 'electron'

export default {
  setup() {
    const filePath = ref('')

    const openFileDialog = () => {
      const files = dialog.showOpenDialogSync({properties: ['openFile']})
      if (files.length > 0) {
        filePath.value = files[0]
      }
    }

    return {
      filePath,
      openFileDialog
    }
  }
}