初学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
}),