配置文件查了好长时间才拼凑完整,Vue.config.js
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, pluginOptions: { electronBuilder: { nodeIntegration: true, chainWebpackMainProcess(config) { config.module .rule("node") .test(/\.node$/) .use("native-ext-loader") .loader("native-ext-loader") }, chainWebpackRendererProcess: (config) => { config.module .rule("node") .test(/\.node$/) .use("native-ext-loader") .loader("native-ext-loader") .options({rewritePath:"src"}) }, builderOptions: { /* files:[ { from: "src/main.node", to: "src/", } ], */ } } } })
写完这个就可以把你编译的test.node文件在test.vue文件里使用了
<script> const a=require("../main.node") a.hello((res)=>{ console.log(res) }) export default { name: 'HelloWorld', props: { msg: String } } </script>
这个main.node文件是我上一篇文章(不是随笔)写的用node-gyp编译出来的,在electron用可能还需要electron-rebuild一下
运行结果:
下面是main.node的源码,开启三个线程回调js传来的函数打印消息