Electron-vue脚手架改造vue项目（2018.11.13更新）
文章中涉及vue项目都是基于vu-cli快速构建，展示的目录结构是vue-cli快速构建之后的目录。Electron-vue也是基于vue-cli的脚手架工具。小伙伴们自己构建的vue项目想要改造成桌面应用，还请移步 Electron将Web页面打包成桌面应用实例 。
2018.11.13更新——实操过程中遇到的问题
1. 关于 (Emitted value instead of an instance of Error)
错误提示：
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)错误截图：
错误代码：
问题解析：
这段代码在原先的vue项目中是没有问题的，copy到electron-vue项目之后，不明所以的报错。删掉lang="html"就可以正常运行了。至于原因，猜测vue项目和electron-vue项目中对于.vue文件的编译方式不同。待学习。
2. 遇到开发环境跨域问题，如何转发代理
在vue-cli项目中，处理开发环境的跨域问题，只需在config/index.js文件中配置proxyTable。大概长这样，（省略了不必要的参数），将我们项目中的接口请求转发到目标接口
dev: {
proxyTable: {
'/**/*': {
target: 'http://192.168.1.1:8080/', // 目标接口域名
changeOrigin: true // 是否跨域
}
}
}在electron-vue项目中，并没有配置转发代理的地方，这就需要我们自己来解决跨域问题啦！
跨域问题出现的本质原因是浏览器的同源策略，注意是浏览器哦。只要绕过浏览器的限制（伪装成同源，欺骗浏览器）就能解决跨域啦，当然前提是服务器端允许跨域请求。
方法一：手动设置headers，以axios为例，将referer和host参数设置为，与后台接口一样的地址
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/', // 目标服务器地址
host: 'c.y.qq.com' // 目标服务器域名
},
params: req.query
}).then((response) => {
console.log(response)
}).catch((e) => {
console.log(e)
})方法二：http-proxy-middleware中间件
既然vue-cli项目能够通过设置参数解决跨域问题，那我们就来倒推一下：
config/index.js <-- build/webpack.dev.conf.js <- build/dev-server.js
在build/dev-server.js文件中我们可以看到http-proxy-middleware中间件的使用，就是她啦。那么怎么在Electron-vue中使用呢？
找到.electron-vue/dev-runner.js文件，修改如下：
引入中间件
const httpProxyMiddleware = require('http-proxy-middleware')在server.listen(9080)之前加一段代码，如下：
server.use(httpProxyMiddleware({
target: '目标服务器地址',
changeOrigin: true
}))
server.listen(9080)1. 什么是Electron
Electron可以让你使用纯 JavaScript 调用丰富的原生 API 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。
这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。 相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。应用启动的入口是一个与 Node.js 模块相同的 package.json文件。
项目名称：Electron
项目官网：https://electronjs.org/docs
2. Electron核心
electron核心我们可以分成2个部分，主进程和渲染进程。主进程连接着操作系统和渲染进程，可以把她看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉的前端环境了。只是载体改变了，从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的。而electron相当于node环境，我们可以在项目里使用所有的node api 。
简单理解就是：给web项目套上一个node环境的壳。
3. 什么是Electron-vue
Electron-vue是一个大神写的基于Vue和Electron的脚手架。
我们直接用Electron-vue这个脚手架来改造原来的vue-cli项目能够方便许多！
项目名称：electron-vue
项目地址：https://github.com/SimulatedGREG/electron-vue
项目文档：https://simulatedgreg.gitbooks.io/electron-vue/content/en/
下面实例解析如何通过electron-vue将一个vue项目改装成桌面应用。
4. 运用Electron-vue脚手架改造vue-cli项目
调整前（通过命令vue init webpack my-project 创建的vue项目）
改造后（通过命令vue init simulatedgreg/electron-vue my-project 创建项目，在用该命令初始化vue项目时，各个参数跟vue-cli初始化项目是一样样的）
调整步骤
将 原项目的src目录下的文件 拷贝到 当前项目src/renderer目录 下（没有看错，直接拷贝，全部拷贝）。调整好之后npm run dev启动，一片红啊
可能存在的问题
1. 原项目中引用的工具包，如element-ui stylus-loader stylus在新项目中需安装一下
2. 原项目中在build/webpack.base.conf.js中配置的参数对应的修改到新项目的.electron-vue/webpack.renderer.config.js中
build/webpack.base.conf.js文件
electron-vue/webpack.renderer.config.js
3. 原项目中用到了stylus预编译，Electron-vue初始化的项目无法编译stylus，需要在.electron-vue/webpack.renderer.config.js 中做相应配置，让新项目能正常编译stylus，（如果用到了less、sass等其他css预编译语言，需设置对应的配置项）
4. 样式出错，Electron是基于WebKit内核的，对于flex、box-sizing、filter等属性需加上-webkit前缀
5. 可能存在的误区
一开始接到要将web页面包装成桌面应用的需求时，因为项目都是用的vue编写，惯性固化的思维让我认为只有vue项目通过Electron-vue的构建方式，（先安装Electron-vue脚手架，再把原先的Vue项目拷贝过来）才能构建成桌面应用。事实是，将项目打包成桌面应用跟使用什么前端框架没有关系，通过Electron任何项目都能打包成桌面应用（注意不是Electron-vue，Electron-vue是能快速将Vue项目打包成桌面程序的脚手架工具，整合了Vue脚手架和Electron的产物）
下一篇 Electron将Web页面打包成桌面应用实例
与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！