技術標籤：VUEvue

版本

• electron：v11.2.2

• vue：2.6

• vue-cli：4.5.1

1. 背景

vue專案web端已開發完畢，現需打包一份客戶端。

2. 首先進入專案，開啟命令列工具

cnpm i -D [email protected]

3. 開啟官方示例

地址：https://github.com/electron/electron-quick-start，將其中main.js preload.js 和 renderer.js檔案下載到專案根目錄

4. 開啟main.js，將其中

mainWindow.loadFile('index.html')

修改為你的專案輸出路徑

mainWindow.loadFile('dist/index.html')

5. 注意絕對路徑

如果vueconfig.js中為絕對路徑，要修改為相對路徑。同時也要注意專案中的路徑引用是否也是絕對路徑。

publicPath:'/',

publicPath: './',

6. 注意router的模式

最好使用預設的hash模式，不要使用history。（可以利用env配置，不同打包終端採用不同模式。）

7. 配置package.json

配置路口檔案，就是剛剛從github上下載下來的main.js

"main": "main.js"

配置預覽命令：

"window": "electron ."
 

然後執行即可預覽

npm run window