electron+vue错误解决方法:
1.运行错误代码:
ERROR in Template execution failed: ReferenceError: process is not defined ERROR in ReferenceError: process is not defined - index.ejs:11 eval [.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:11:2 - index.ejs:16 module.exports [.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:16:3 - index.js:284 [electron-test]/[html-webpack-plugin]/index.js:284:18 - runMicrotasks - task_queues.js:93 processTicksAndRejections internal/process/task_queues.js:93:5
解决方案
修改.electron-vue/webpack.web.config.js和.electron-vue/webpack.renderer.config.js文件的HtmlWebpackPlugin,添加templateParameters,修改后如下:
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 }),
2.使用electron-forge init notepage 创建项目时,一直加载依赖包,不能运行
更换配置文件package.json为
{ "name": "my-new-app", "productName": "my-new-app", "version": "1.0.0", "description": "My Electron application description", "main": "src/index.js", "scripts": { "start": "electron-forge start", "package": "electron-forge package", "make": "electron-forge make", "publish": "electron-forge publish", "lint": "eslint src --color" }, "keywords": [], "author": "Administrator", "license": "MIT", "config": { "forge": { "make_targets": { "win32": [ "squirrel" ], "darwin": [ "zip" ], "linux": [ "deb", "rpm" ] }, "electronPackagerConfig": { "packageManager": "yarn" }, "electronWinstallerConfig": { "name": "my_new_app" }, "electronInstallerDebian": {}, "electronInstallerRedhat": {}, "github_repository": { "owner": "", "name": "" }, "windowsStoreConfig": { "packageName": "", "name": "mynewapp" } } }, "dependencies": { "electron-compile": "^6.4.4", "electron-squirrel-startup": "^1.0.0" }, "devDependencies": { "babel-plugin-transform-async-to-generator": "^6.24.1", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "electron-forge": "^5.2.2", "electron-prebuilt-compile": "2.0.4", "eslint": "^3", "eslint-config-airbnb": "^15", "eslint-plugin-import": "^2", "eslint-plugin-jsx-a11y": "^5", "eslint-plugin-react": "^7" } }
然后再次进行npm install冲新加载依赖包,项目就运行ok了
3.解决electron-vue中无法Element组件
打开文件:electron-vue/webpack.renderer.config.js 在大约21行左右找到 let whiteListedModules 将element-ui添加进去,最终如下所示。 let whiteListedModules = ['vue', 'element-ui'] 最后重启下项目就好了。