Node18.18.2 + Vue3 + Electron27

写在前面：一定要确认好版本的对应关系，否则会出现很多意想不到的问题!

版本关系对照链接
node 与 npm
node 与 electron
node 与 cnpm
vue/cli 与 vue

**1. 安装了nvm node版本管理工具，通过nvm管理node

安装nvm node版本管理工具
brew install nvm

常用的nvm命令
显示nvm管理的所有node 
nvm ls / nvm list

安装指定 node版本
nvm install node版本号
nvm install 18.18.2

卸载指定 node版本
nvm uninstall node版本号
nvm uninstall v18.18.2

设置指定node版本 （注意切换窗口会改变当前node版本）
nvm use node版本
nvm use v18.18.2

设置默认指定node版本
nvm alias default node版本
nvm alias default v18.18.2

显示当前所使用node版本
nvm current

显示nvm版本
nvm version

以mac举例，使用cnpm时，最好清空npm的node_modules
npm默认的全局node_modules路径
/usr/local/lib/node_modules
nvm的全局node_modules路径
${HOME}/.nvm/versions/node/v18.18.2

2. 设置下载源，切换node版本请注意npm与cnpm版本变化
   nvm切换node版本cnpm会失效，需要在每个版本下单独安装cnpm

安装 cnpm 使用淘宝镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org

将 npm 设置为 淘宝镜像：
npm config set registry https://registry.npm.taobao.org
cnpm config set registry https://registry.npm.taobao.org

通过npm查看npm镜像设置：
npm config get registry 

通过cnpm查看cnpm镜像设置：(相当于使用cnpm)
cnpm config get registry

3. 安装vue-cli

vue & vue Cli 版本对应关系：
Vue CLI 4.5以下，对应的是Vue2
Vue CLI 4.5及以上，对应的是Vue3，创建项目的时候可以选择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

3. 使用vue/cli初始化vue项目

vue create electron_demo

启用淘宝源的两个配置
${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

** 这里有个问题，electron-builder默认选不到比较新版本的electron，所以安装后需要手动更新**
** Electron不能跨架构跨平台打包，MacOS下只能打包MacOS包，如需要打包，Windows、Linux等需要去对应平台**

参考文档
https://www.jianshu.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也要更改为这个包
import { createProtocol } from '@matthijsburgh/vue-cli-plugin-electron-builder/lib'

// 以上步骤我并没有移除 vue-cli-plugin-electron-builder

5. 运行

看package.json中scripts配置即可
cnpm run electron:serve

xx. 错误

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
(Use Electron --trace-deprecation ... to show where the warning was created)

在vue.config.js增加如下配置

pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: (config) => {
        config.output.filename('background.js');
      }
    }
  }