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']
最后重启下项目就好了。