vue-cli-plugin-electron-builder项目中无法在vue中使用electron内置函数的原因和解决办法

例如我们要通过shell来调用默认的浏览器打开一个url链接，代码如下：

<script>
import { shell } from "electron";
export default {
  methods: {
    openLink(url) {
      console.log("open " + url);
      shell.openExternal(url);
    },
  },
};
</script>

可惜，当我们跑起来的时候，会出现如下的错误：

 ERROR  Failed to compile with 2 errors                                                                                                                                             14:51:09

 error  in ./node_modules/electron/index.js

Module not found: Error: Can't resolve 'fs' in '/Users/mlk/git/fit_maptools/node_modules/electron'

 error  in ./node_modules/electron/index.js

Module not found: Error: Can't resolve 'path' in '/Users/mlk/git/fit_maptools/node_modules/electron'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

解决办法也非常简单，只要修改vue.config.js文件，加入如下配置即可：

pluginOptions: {
    electronBuilder: {
      nodeIntegration:true, //在VUE中使用node或electron函数
      customFileProtocol: "./", //修正打包时图片无法显示问题
    },
  },

完整代码可以参考如下配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8103,     // 端口号
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].title = "MyApp";
      return args
    })
  },
  
  pluginOptions: {
    electronBuilder: {
      nodeIntegration:true, //在VUE中使用node或electron函数
      customFileProtocol: "./", //修正打包时图片无法显示问题
    },
  },
})