文章中涉及vue項目都是基于vu-cli快速建構，展示的目錄結構是vue-cli快速建構之後的目錄。Electron-vue也是基于vue-cli的腳手架工具。小夥伴們自己建構的vue項目想要改造成桌面應用，還請移步 Electron将Web頁面打包成桌面應用執行個體 。
2018.11.13更新——實操過程中遇到的問題
1. 關于<template > (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)
錯誤截圖：
錯誤代碼：
<template >
<router-view></router-view>
</template>
問題解析：
這段代碼在原先的vue項目中是沒有問題的，copy到electron-vue項目之後，不明是以的報錯。删掉就可以正常運作了。至于原因，猜測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頁面打包成桌面應用執行個體
與君共勉：再牛逼的夢想，也抵不住傻逼般的堅持！