場景

electron-vue

基于 vue (基本上是它聽起來的樣子) 來構造 electron 應用程序的樣板代碼。

該項目的目的，是為了要避免使用 vue 手動建立起 electron 應用程序。electron-vue 充分利用 vue-cli 作為腳手架工具，加上擁有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。

使用electron-vue可以將vue的項目打包成exe應用。

但是這種方式對于一開始使用electron-vue建立項目架構模板比較好，那樣可以往上遞增式的添加項目。

但是說如果說vue項目已經開發完成，并沒有使用electron-vue來搭建項目模板，那么后期對于項目的

合并和遷移以及路徑的修改等問題都是麻煩事。

所以如果說vue的項目已經搭建完成并能成功部署，可以使用如下方式。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

首先執行vue項目打包

npm run build

打包成功后

?

會在項目目錄下生成dist目錄。此目錄就是打包之后的目錄。

?

然后在dist目錄下新建server.js

var express = require('express');var app = express();const hostname = '12.12.12.12';const port = 8080;app.use(express.static('./'));app.listen(port, hostname, () => {console.log(`Server is running `);});

注意要把這里的hostname改為要部署的服務器的ip,這里的12.12.12.12是隨便填寫。

切記要修改為自己服務器的ip。

主要這里也不能用localhost。

然后登錄到Windows Server 服務器上，找一個磁盤目錄。將整個dist目錄復制到服務器上。

注意這里新建server.js的目的是為例使用node的express作為服務器去啟動項目。

如果不想用express還可以使用tomcat、nginx、IIS等。

這里以使用express為例。

首先需要在服務器上安裝node。

然后在服務器上的dist目錄下打開命令行，使用npm 安裝express

npm install express

?

安裝express成功后啟動服務

node server

?

注意這里啟動的ip為localhost，正常應該是你在server.js中設置的ip。這里只是為了演示用。

然后在確保你服務器的防火墻和8080端口沒有問題后就可以在瀏覽器中通過

http://你的IP:8080/index.html

來進行訪問服務器上的項目

?

項目部署成功后下面就考慮套一層桌面程序的殼。

對于桌面程序的開發，做的較好的是C#的Winform開發。

所以打開Visual Studio -文件-新建項目-Winform桌面程序應用

?

然后在form1的設計頁面中找到工具箱中的WebBrowser控件，拖拽到窗體中

?

然后右擊WebBrower控件選擇屬性，設置其URL屬性為你上面部署的項目的url

?

然后將項目設置為release

?

然后在解決方案資源管理器右擊項目-重新生成

?

然后來到項目目錄下的bin/release下的exe文件就在這里

?

雙擊這個exe文件

?

總結

以上是生活随笔為你收集整理的Vue项目打包成桌面程序exe除了使用electron-vue你还可以这样的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。