初学electron,尝试使用electron-vue
按照文档开始创建electron + vue项目,文档链接
- npm install -g vue-cli
- vue init simulatedgreg/electron-vue my-project
- cd my-project
- npm install
注意:这一步事件比较长,而且会出现问题,我在这一步就出现问题了,安装成功后无法启动 - npm run dev
问题:1.npm install之后,执行npm run dev,报错 Electron failed to install correctly…,不啦不啦一大堆,什么问题呢?百度,需要删除node_modules/electron的安装包,然后再重新npm install,重新安装包即可。
按照说明,删除,重新安装,依旧如此,无奈转yarn
1.删除node_modules
2.安装全局yarn: npm install yarn -g
3.安装项目依赖: yarn install
4.安装electron: yarn install electron --save
5.重新启动程序: electron .
原文链接
2.完成install后,npm run dev报错,require is not defined, process is not defined,
不要惊慌,不要害怕,跟小哥哥一步一步来
首先:在src/main文件夹下找到index.js,找到new BrowserWindow,修改webPreferences的nodeIntegration为true
new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
webPreferences: {
nodeIntegration: true
}
})
重启项目试一下,此时应该已经解决require的问题了
这个问题是因为最新的[email protected]系列中,这个nodeIntegration参数,默认改成false了。而在以前版本的electron中,这个nodeIntegration参数,默认为true。
如果process依旧是not defined,继续来,找到根目录下.electron-vue/webpack.web.config.js文件和 webpack.renderer.config.js,找到 new HtmlWebpackPlugin,添加如下属性
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
完整代码
webpack.web.config.js
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
nodeModules: false
}),
webpack.renderer.config.js
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
nodeModules: process.env.NODE_ENV !== 'production'
? path.resolve(__dirname, '../node_modules')
: false
}),