寫(xiě)在前面：一定要確認(rèn)好版本的對(duì)應(yīng)關(guān)系抵窒，否則會(huì)出現(xiàn)很多意想不到的問(wèn)題!
版本關(guān)系對(duì)照鏈接
node 與 npm
node 與 electron
node 與 cnpm
vue/cli 與 vue
**1. 安裝了nvm node版本管理工具，通過(guò)nvm管理node
安裝nvm node版本管理工具
brew install nvm
常用的nvm命令
顯示nvm管理的所有node
nvm ls / nvm list
安裝指定 node版本
nvm install node版本號(hào)
nvm install 18.18.2
卸載指定 node版本
nvm uninstall node版本號(hào)
nvm uninstall v18.18.2
設(shè)置指定node版本 （注意切換窗口會(huì)改變當(dāng)前node版本）
nvm use node版本
nvm use v18.18.2
設(shè)置默認(rèn)指定node版本
nvm alias default node版本
nvm alias default v18.18.2
顯示當(dāng)前所使用node版本
nvm current
顯示nvm版本
nvm version
以mac舉例叠骑，使用cnpm時(shí)李皇，最好清空npm的node_modules
npm默認(rèn)的全局node_modules路徑
/usr/local/lib/node_modules
nvm的全局node_modules路徑
${HOME}/.nvm/versions/node/v18.18.2
- 設(shè)置下載源，切換node版本請(qǐng)注意npm與cnpm版本變化
nvm切換node版本cnpm會(huì)失效宙枷，需要在每個(gè)版本下單獨(dú)安裝cnpm
安裝 cnpm 使用淘寶鏡像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
將 npm 設(shè)置為 淘寶鏡像：
npm config set registry https://registry.npm.taobao.org
cnpm config set registry https://registry.npm.taobao.org
通過(guò)npm查看npm鏡像設(shè)置：
npm config get registry
通過(guò)cnpm查看cnpm鏡像設(shè)置：(相當(dāng)于使用cnpm)
cnpm config get registry
- 安裝vue-cli
vue & vue Cli 版本對(duì)應(yīng)關(guān)系：
Vue CLI 4.5以下掉房，對(duì)應(yīng)的是Vue2
Vue CLI 4.5及以上，對(duì)應(yīng)的是Vue3慰丛，創(chuàng)建項(xiàng)目的時(shí)候可以選擇Vue2
安裝vue3
cnpm install -g @vue/cli
指定版本的安裝
cnpm install -g @vue/cli@5.0.8
[@vue/cli@5.0.8] 安裝完成后可以看到@vue/cli版本是5.0.8
安裝vue2卓囚，注意是vue-cli
cnpm install -g vue-cli
[vue-cli@2.9.6] 安裝完成后可以看到vue-cli版本是2.9.6
- 使用vue/cli初始化vue項(xiàng)目
vue create electron_demo
啟用淘寶源的兩個(gè)配置
${HOME}/.npmrc
registry=https://registry.npm.taobao.org
python=python3
sass_binary_site=https://npm.taobao.org/mirrors/node-sass
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/
${HOME}/.vuerc
{
"useTaobaoRegistry": false, // 改成true就行，其他不用改
"packageManager": "npm",
"latestVersion": "5.0.8",
"lastChecked": 1699262086755
}
4.安裝electron-builder
** 這里有個(gè)問(wèn)題诅病，electron-builder默認(rèn)選不到比較新版本的electron哪亿，所以安裝后需要手動(dòng)更新**
** Electron不能跨架構(gòu)跨平臺(tái)打包，MacOS下只能打包MacOS包睬隶，如需要打包，Windows页徐、Linux等需要去對(duì)應(yīng)平臺(tái)**
參考文檔
http://www.reibang.com/p/62905cbdcc53
vue add electron-builder
// 卸載electron
cnpm uninstall electron
// 安裝指定版本 electron
cnpm install -D electron@27.0.3
cnpm install -D @electron/remote
cnpm install -D @matthijsburgh/vue-cli-plugin-electron-builder
// 需要注意苏潜，background.js 中引用createProtocol也要更改為這個(gè)包
import { createProtocol } from '@matthijsburgh/vue-cli-plugin-electron-builder/lib'
// 以上步驟我并沒(méi)有移除 vue-cli-plugin-electron-builder
- 運(yùn)行
看package.json中scripts配置即可
cnpm run electron:serve
xx. 錯(cuò)誤
INFO Launching Electron...
(node:27364) [DEP0128] DeprecationWarning: Invalid 'main' field in '/Users/hanzhen/work_space/space_idea/learning/kit-paster/dist_electron/package.json' of 'background.js'. Please either fix that or report it to the module author
(UseElectron --trace-deprecation ...to show where the warning was created)
在vue.config.js增加如下配置
pluginOptions: {
electronBuilder: {
chainWebpackMainProcess: (config) => {
config.output.filename('background.js');
}
}
}
