electron-vue+ElementUI开发到打包项目中的问题记录

1，使用 electron-vue 初始化项目时，electron版本是2.0.4，最好更新到最新版本。不然用 electron-updater 做应用自动更新时，会报错。

2，最好使用 npm 或者 yarn 来安装依赖，不要使用 cnpm，因为在使用 electron-vue 打包的时，会报一些莫名其妙的错误。可以将 node_modules 文件夹删掉，再 npm install 或 yarn add 。

3，在开发调试中，如果报错 require is not defined，只需要在初始化窗口中加入以下代码：

// electron在5.0.0版本之后，nodeIntegration默认为false
let win = new BrowserWindow({
    webPreferences: {
        nodeIntegration: true
    }
})

4，有的朋友是在2.0.4版本下完成开发的，然而将electron升级到最新版本后，无法请求后台API，无法跨域报错 by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request，在你的主进程代码中加入以下代码：

let mainWindow:
function createWindow(){
    // new BrowserWindow code
}
app.on('ready',createWindow);
// 加入以下代码
app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors');

 5，在集成ElementUI后，使用table组件但是无法渲染，解决办法：

　　1)，打开.electron-vue目录下的 webpack.renderer.config.js 文件

　　2)，搜索 whiteListedModules

　　3)，将这一行修改为：

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

　　具体原因可以看这篇博文：https://blog.csdn.net/qq_17285877/article/details/96095936#_6

6，在electron-vue中无法改变vuex状态，找到 src/renderer/store/index.js，注释掉 createSharedMutations 插件的调用：

import Vue from 'vue'
import Vuex from 'vuex'
import { createPersistedState, createSharedMutations } from 'vuex-electron'
import modules from './modules'
Vue.use(Vuex)

export default new Vuex.Store({
  modules,
  plugins: [
    createPersistedState(),
    // 注释这个插件的调用，该插件是用于多窗口共享状态的
    //createSharedMutations()
  ],
  strict: process.env.NODE_ENV !== 'production'
})

 7，electron-vue应用打包成.exe后，win32的系统无法安装，提示：“需要64位系统”，解决办法：

　　1)，打开项目 package.json 文件，找到 build 命令

"scripts": {
    "build": "node .electron-vue/build.js && electron-builder",
    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
    "dev": "node .electron-vue/dev-runner.js",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
    "postinstall": ""
  },

　　2)，将 build 命令改成：(具体参数可以自行查看 electron-builder 文档)

"build": "node .electron-vue/build.js && electron-builder --win --ia32"

　　3)，重新执行 npm run build 即可

8，electron-vue应用安装好后，win7sp1 32位系统，打开应用白屏的解决办法：安装 .net framework 4.7.1 及以上版本，安装完毕重启电脑即可。