哪个网站可以做代码题目,网站开发实现的环境,网站建设需要金额,凡科建站手机版登录环境说明
这里的测试如果没有其他特别说明的#xff0c;就是在win10/i7环境#xff0c;64位
创建项目
vite官方是直接支持创建electron项目的#xff0c;所以#xff0c;这里就简单很多了。我们已经不需要向开始那样自己去慢慢搭建
yarn create vite这里使用yarn创建就是在win10/i7环境64位
创建项目
vite官方是直接支持创建electron项目的所以这里就简单很多了。我们已经不需要向开始那样自己去慢慢搭建
yarn create vite这里使用yarn创建当然也可以根据自己的喜好使用npm但是不要使用pnpm截至目前**【2024年5月26日】**使用pnpm创建的electron项目开发运行时没有问题但是打包时会报很多包找不到的错误。不信的可以自己试。如果有好的解决方案还烦请不吝赐教 如果使用npm命令是
npm create vitelatest接下来我们继续看下一步。输入yarn create vite后回车第一步是输入项目名称默认是vite-project这里我们使用默认然后关键的是第二步select a framework选择一个框架这里我们选择“Others然后回车 接下来会有两个选项我们选择”create-electron-vite“选项即可 回车现在就开始创建项目了。创建好之后我们cd到项目目录安装依赖
正确配置国内镜像
安装依赖时electron的国内镜像要单独配置也就是就算npm配置了registryhttps://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.org 和 http://registry.npm.taobao.org 域名已于 2022 年 05 月 31 日零时起停止服务。官方停止维护了证书不过期才怪。
正确的配置地址是**ELECTRON_MIRRORhttps://npmmirror.com/mirrors/electron/**使用yarn的可以在.yarnrc配置如果.yarnrc不配置只要.npmrc配置就行但是如果.yarnrc文件有ELECTRON_MIRROR那么要么配置正确要么删除。
安装依赖并启动
配置好国内镜像后安装依赖然后运行npm run dev就可以启动了。npm run build就可以打包了这里用的windows电脑。一个简单的vitetytescriptvite项目就完成了
兼容win7 32位
实际开发中我们肯定没有这么简单。往往需求面对多种情况比如需要支持win7 32位
如何测试
mac的最好用真机了其他就用虚拟机。这里默认我们准备好了mac真机和虚拟机。没有准备虚拟机的这里推荐使用virtualbox轻巧关键不需要花钱。 我们先来看下支持win7 32位的适配
支持win7 32位需要在package.json里面的devDependencies修改electron版本为 21.4.4如下
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里面加一条命令
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配置改成如下 win: {target: [nsis,nsis:ia32, nsis:x64], // 分别指定NSIS目标为默认自动检测架构、32位、64位artifactName: ${productName}-windows-${arch}-${version}.${ext}},然后重新运行 npm run build这次会打出两个包分别是 64位、32位、3264位合并版 先写道这里吧下一节我们来看下mac平台的打包
