vue3+electron+typescript 项目安装、打包、多平台踩坑记录

环境说明

这里的测试如果没有其他特别说明的,就是在win10/i7环境,64位node 版本v16.20.2

创建项目

vite官方是直接支持创建electron项目的,所以,这里就简单很多了。我们已经不需要向开始那样自己去慢慢搭建

npm 复制代码
yarn create vite

这里使用yarn创建,当然也可以根据自己的喜好使用npm,但是不要使用pnpm ,截至目前**【2024年5月26日】**,使用pnpm创建的electron项目,开发运行时没有问题,但是打包时,会报很多包找不到的错误。不信的可以自己试。如果有好的解决方案还烦请不吝赐教

如果使用npm命令是

npm 复制代码
npm create vite@latest

接下来我们继续看下一步。输入yarn create vite后回车,第一步是输入项目名称,默认是vite-project,这里我们使用默认,然后关键的是第二步:select a framework(选择一个框架),这里我们选择"Others",然后回车

接下来会有两个选项,我们选择"create-electron-vite"选项,即可

回车,现在就开始创建项目了。创建好之后,我们cd到项目目录,安装依赖

正确配置国内镜像

安装依赖时,electron的国内镜像要单独配置,也就是就算npm配置了registry=https://registry.npmmirror.com/也不行

这里要注意的一个坑是,不少伙伴会去网上搜索怎么配置electron的国内镜像,得到的答案可能是如下:
ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" ,包括electron官方目前也是这样子(const 目前=2024年5月24日)

如果是这样配置的镜像,安装依赖时,我们可能会得到一个类似错误,如下: Hostname/IP does not match certificate's altnames: Host: npm.taobao.org.

基本意思就是安全证书过期了,无法下载

然后我们可能会搜到一大堆解决安全证书的方法,比如将ssl设置为fasle,比如:
npm config set strict-ssl false,结果发现基本无用

出现这个报错的原因,根源其实是淘宝镜像地址改域名了,http://npm.taobao.orghttp://registry.npm.taobao.org 域名已于 2022 年 05 月 31 日零时起停止服务。官方停止维护了,证书不过期才怪。

正确的配置地址是**:ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/\*\*,使用yarn的,可以在.yarnrc配置,如果.yarnrc不配置,只要.npmrc配置就行,但是如果.yarnrc文件有ELECTRON_MIRROR,那么要么配置正确,要么删除。

安装依赖并启动

配置好国内镜像后,安装依赖,然后运行npm run dev,就可以启动了。npm run build,就可以打包了(这里用的windows电脑)。一个简单的vite+tytescript+vite项目就完成了

兼容win7 32位

实际开发中,我们肯定没有这么简单。往往需求面对多种情况,比如,需要支持win7 32位?

如何测试?

用虚拟机。这里默认我们准备好了虚拟机。没有准备虚拟机的这里推荐使用virtualbox,轻巧,关键不需要花钱。

virtualbox 虚拟机下载地址:https://www.virtualbox.org/wiki/Downloads

virtualbox 低版本虚拟机下载地址:https://www.virtualbox.org/wiki/Download_Old_Builds

虚拟机镜像文件下载地址:
https://msdn.itellyou.cn/
https://next.itellyou.cn/Original/#

我们先来看下支持win7 32位的适配

支持win7 32位,需要在package.json里面的devDependencies修改electron版本为 21.4.4,如下

json 复制代码
"electron": "^21.4.4",

然后删除node_modules的所有依赖后重装依赖,(记得必须删除全部后重装),重新运行 npm run dev,然后我们很可能看到下面这样一个错误:

App threw an error during load

Error [ERR_REQUIRE_ESM]: require() of ES Module E:\study\vite-project\dist-electron\main.js from E:\study\vite-project\node_modules\electron\dist\resources\default_app.asar\main.js not supported.

Instead change the require of E:\study\vite-project\dist-electron\main.js in E:\study\vite-project\node_modules\electron\dist\resources\default_app.asar\main.js to a dynamic import() which is available in all CommonJS modules.

at c._load (node:electron/js2c/asar_bundle:5:13343)

at loadApplicationPackage (E:\study\vite-project\node_modules\electron\dist\resources\default_app.asar\main.js:121:16)

at Object. (E:\study\vite-project\node_modules\electron\dist\resources\default_app.asar\main.js:233:9)

at c._load (node:electron/js2c/asar_bundle:5:13343)

at Object. (node:electron/js2c/browser_init:189:3102)

at ./lib/browser/init.ts (node:electron/js2c/browser_init:189:3306)

at webpack_require (node:electron/js2c/browser_init:1:128)

at node:electron/js2c/browser_init:1:1200

at node:electron/js2c/browser_init:1:1267

at c._load (node:electron/js2c/asar_bundle:5:13343)

大意就是在es6模块化语法下,不能使用require语法

请注意,在我们改electron的版本之前,是没有这个错误的。也就是 electron最新版本(这里是30.0.1),编译器做了相关兼容处理,在低版本,比如21.4.4则没有做处理

这个错误是报的摸不着头脑,但是要解决也很简单,删掉 type:"module"即可

然后我们就可以打包了。打包之后可以看多多了个文件夹,如下

我们在win10 64位系统,双击"YourAppName-Windows-0.0.0-Setup.exe"安装,正常。

打开win7 64虚拟机,将文件拷进去安装,正常

打开win7 32虚拟机,将文件拷进去安装,报错:

因此32位的系统,我们还得重新配置。

win7 32 位配置方案一:增加32位打包命令

到package.json的script里面加一条命令

json 复制代码
"build:32": "vue-tsc && vite build && electron-builder --win --ia32"

然后我们运行命令: npm run build:32,打包后,将 YourAppName-Windows-0.0.0-Setup.exe 拖到 win7 32虚拟机安装,正常了

win7 32 位配置方案二:配置一次打两个平台包

到electron-builder.json5文件中,将原有的win配置改成如下:

json 复制代码
  "win": {
    "target": ["nsis","nsis:ia32", "nsis:x64"], // 分别指定NSIS目标为默认(自动检测架构)、32位、64位
    "artifactName": "${productName}-windows-${arch}-${version}.${ext}"
  },

然后重新运行 npm run build,这次会打出三个包,分别是 64位、32位、32+64位合并版

兼容winxp ?

放弃吧。真的要兼容winxp,建议交给c#等原生大佬来写咯。我们前端一边凉快去。

先写道这里吧,下一节我们来看下mac平台的打包

相关推荐
疯狂的沙粒15 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员31 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒42 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc1 小时前
学习electron
javascript·学习·electron
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳2 小时前
vue3:瀑布流
前端·javascript·vue.js
霍先生的虚拟宇宙网络2 小时前
webp 网页如何录屏?
开发语言·前端·javascript