Electron+vue创建中,遇到的问题

987 阅读1分钟

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