Electron+vue3 Can‘t resolve ‘fs‘ + Can‘t resolve ‘path‘的解决方法
electron+vue3
·
环境配置:
vue3+Electron^12.0.0
问题:
在渲染进程中添加ipcRenderer和remote等模块时报错
import { ipcRenderer } from 'electron'
export default {
methods: {
close() {
ipcRenderer.send('close')
},
minisize() {
ipcRenderer.send('minimize')
},
restore() {
ipcRenderer.send('restore')
},
maxsize() {
ipcRenderer.send('maximize')
}
}
}
解决方法:
1、在vue.config.js替换成以下内容
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: false,
configureWebpack: {
externals: {
'electron': 'require("electron")'
},
},
})
2、修改background.js, 加载beta版本的vue-devtools
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
// VUEJS_DEVTOOLS ---- vue3 用不了
const { default: installExtension, } = require('electron-devtools-installer')
// 使用beta版 vue-devtools
// 参考链接 https://github.com/vuejs/vue-devtools/issues/1279
// https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension
// https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
var vue_devtools_beta = { id: "ljjemllljcmogpfapbkkighbhhppjdbg", electron: ">=1.2.1" }
var result = await installExtension(vue_devtools_beta)
if (result) {
console.log("success load : " + result)
}
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})
3、这时,成功编译:但出现新的错误Uncaught ReferenceError: require is not defined,而且页面渲染不出来
4、修改background.js的createWindow方法
async function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
frame:false,
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: true,
//出现这个问题是因为官方为了安全性,将 electron v12.0.0 的 contextIsolation 的默认值改了。
//所以今后要在渲染进程里调用 require 的话,还需要加上 contextIsolation: false 。
contextIsolation: false,
enableRemoteModule: true
}
})
最后:
输入npm run electron:serve
成功运行
参考文章:
解决electron10.1.3+vue3无法显示vue-devtools问题_「已注销」的博客-CSDN博客
electron Error: Can't resolve 'fs'(编译报错)_舜岳的博客-CSDN博客
Vue 创建项目后没有 webpack.config.js(vue.config.js) 文件_卡尔特斯的博客-CSDN博客_webpack.config.js没有
更多推荐
已为社区贡献1条内容
所有评论(0)