vue-cli-plugin-electron-builder 获取electron中的remote模块

阳光辉
2023-12-01

vue-cli-plugin-electron-builder 默认禁止fs模块读取文件,在vue.config.js中添加:

module.exports = {
    pluginOptions: {
      electronBuilder: {
        nodeIntegration: false, // 启用fs
        // List native deps here if they don't work
        externals: ['my-native-dep'],
        // If you are using Yarn Workspaces, you may have multiple node_modules folders
        // List them all here so that VCP Electron Builder can find them
        nodeModulesPath: ['../../node_modules', './node_modules']
      }
    }
  }

如果不启用会报错:Uncaught TypeError: fs.existsSync is not a function...

获取remote模块

import { remote } from 'electron'

// 设置窗口大小
exports.setSize = (w: number, h: number) => {
  remote.getCurrentWindow().setSize(w, h)
}

vue中使用

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <el-button type="primary" @click="setSize">修改窗口大小</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import {setSize} from '../render'

export default defineComponent({
  name: 'Login',
  methods: {
    setSize() {
      setSize(1000, 500)
    }
  }
})
</script>
 类似资料: