electron + vite + vue 在vue中使用fs报no access

在浏览器环境中，使用 Node.js 的 fs 模块是不被允许的。因此，如果使用 Electron + Vite + Vue 开发应用程序，需要使用 Electron 提供的 API 来进行文件系统操作。

在 Electron 中，可以使用 Node.js 的 fs 模块，因为 Electron 应用程序是基于 Chromium 和 Node.js 构建的。如果需要在 Vue 中使用 Electron 的 fs 模块，可以通过 Vue 的插件机制来实现。

首先，在 Electron 主进程中添加一个模块来暴露 fs 对象：

// main.js
const { app, BrowserWindow } = require('electron')
const fs = require('fs')

let mainWindow = null

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  })

  mainWindow.loadFile('index.html')

  mainWindow.on('closed', function () {
    mainWindow = null
  })

  // 将 fs 模块暴露给 Vue 实例
  mainWindow.fs = fs
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

然后，在 Vue 的插件中使用 fs 对象：

// fs-plugin.js
export default {
  install: (Vue) => {
    Vue.prototype.$fs = window.require('electron').remote.getCurrentWindow().fs
  },
}

最后，在 Vue 应用程序中使用插件即可：

// main.js
import Vue from 'vue'
import App from './App.vue'
import fsPlugin from './plugins/fs-plugin'

Vue.use(fsPlugin)

new Vue({
  render: (h) => h(App),
}).$mount('#app')

在 Vue 组件中，可以像这样使用 $fs 对象：

this.$fs.readFile('/path/to/file', (err, data) => {
  if (err) throw err
  console.log(data)
})

需要注意的是，读取本地文件需要应用程序有相应的权限，可以在 package.json 文件中添加以下配置来获取权限：

{
  "name": "my-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "appId": "com.example.myapp",
    "productName": "My App",
    "directories": {
      "output": "dist_electron"
    },
    "files": [
      "dist/**/*",
      "main.js",
      "package.json"
    ],
    "extraResources": [
      {
        "from": "assets",
        "to": "assets"
      }
    ],
    "dmg": {
      "contents": [
        {
          "x": 110,
          "y": 150
        },
        {
          "x": 480,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },
    "mac": {
      "category": "public.app-category.developer-tools",
      "icon": "assets/icon.icns"
    },
    "win": {
      "target": [
        "nsis",
        "msi"
      ],
      "icon": "assets/icon.ico"
    },
    "linux": {
      "category": "Development",
      "icon": "assets/icon.png"
    }
  },
  "dependencies": {
    "electron": "^13.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "electron-builder": "^22.11.7",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "buildResources": "public"
}

在 package.json 文件中添加了 "buildResources": "public" 配置，表示将 public 目录下的文件打包到应用程序中。如果需要读取 public 目录下的文件，可以使用相对路径来访问。