ELECTRON-VUE相关报错

ELECTRON-VUE相关报错

一、Build: Identifier ‘tasks’ has already been declared

截图：

原因：
.electron-vue\build.js文件中，tasks变量重复命名了
解决办法：
修改其中一对的tasks变量名，需要注意的是本文件中一共包含四个tasks，前两个是一对，后两个是一对，修改时请对应修改。

二、Build：Application entry file “dist\electron\main.js”

Error: Application entry file "dist\electron\main.js" in the "D:\Cilo\项目\electron\activeTool\build\win-unpacked\resour
ces\app.asar" does not exist. Seems like a wrong configuration.

截图：

原因：
.electron-vue\build.js文件中，代码中使用了 Multispinner ，但没有在开头引用，并且package.json文件中也没有这个依赖文件。

解决办法：
先安装 Multispinner ，再在文件中引用

npm install multispinner -D

const Multispinner = require('multispinner')

三、Build：connect ETIMEDOUT 13.229.188.59:443

截图：

原因：
外网下载build需要的依赖（winCodeSign、nsis、nsis-resources），比较慢

解决办法：
手动下载需要的文件，手动解压到电脑的：%localPath%/AppData/local/electron-builder\cache
地址：https://github.com/electron-userland/electron-builder-binaries/releases
如果没看见AppData文件夹，请点击查看，把隐藏文件夹显示出来

winCodeSign如下图：

nsis如下图：

四、Run：GET http://localhost :9080/__ webpack_ hmr 404 (Not Found)

截图：

原因：

解决办法：
在 .electron-vue/dev-runner.js line:67 关闭 hot 选项

const server = new WebpackDevServer(compiler,{
	contentBase: path.join(__dirname, '../'),
	quiet: true,
	//hot: true,
	before (app, ctx) {
		app.use(hotMiddleware)
		ctx.middleware.waitUntilValid(() => {
			resolve()
		})
	}
})

server.listen(9080)

五、Build：makensis.exe exited with code 1Output:

截图：

原因：
electron项目路径不能有中文。

解决办法：
修改electron项目路径上的中文文件夹名字。

六、Build：打包安装后运行白屏，需要点击一下

截图：

原因：
vue-router路由模式错误

解决办法：
给vue-router的index.js文件添加上hash路由模式

export default new Router({
  mode: 'hash',
  routes: [
    {
      path: '/',
      name: 'landing-page',
      component: require('@/components/LandingPage').default
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})

七、Build：打包可以自定义位置

解决办法：
在package.json文件的build选项中添加下面代码

"build": {
	"nsis": {
		"oneClick": false, // 是否可以单击运行
		"allowToChangeInstallationDirectory": true, // 自定义安装位置
		"perMachine": true
	}
}

八、Dev：使用elementUI时报错$attrs is readonly

解决办法：
将 webpack.render.config.js 文件中

let whiteListedModules = ['vue'];

替换为

let whiteListedModules = ['vue', 'element-ui'];