vue3+vite5+electron+node20版本桌面应用打包出错

已于 2024-04-12 11:01:09 修改
阅读量331 收藏 2
点赞数 5
文章标签： electron javascript 前端
于 2024-04-12 11:00:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Feng_1012/article/details/137672763
版权

首先是vite5版本不支持require引入了，暂时的解决办法是在package.json中删掉  "type": "module",不报错但是有警告：The CJS build of Vite's Node API is deprecated.

再有就是打包时在github下载东西时超时报错，解决办法是在项目根目录新建 .npmrc 文件写入国内资源：

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

 

如果配置完成了又报错：

⨯ cannot execute  cause=exit status 2
                    out=
    7-Zip (a) 21.07 (x64) : Copyright (c) 1999-2021 Igor Pavlov : 2021-12-26

    Scanning the drive for archives:
    1 file, 5635384 bytes (5504 KiB)

.

.

.

.

这个报错是没有管理员权限，使用管理员身份运行PowerShell，cd进入项目目录执行打包命令即可

win11 右键点击win图标

打开终端管理员进入项目目录，执行打包命令就OK啦，之后就可以正常在vscode中进行打包了。

Feng_1012
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
升级 Vite 5 出现警告 The CJS build of Vite‘s Node API is deprecated.
有来技术
01-08 9431
The CJS build of Vite's Node API is deprecated. 警告解决
升级vite5注意事项
你的世界我做主
12-22 3986
现在会记录弃用警告。您应该更新您的文件或框架以导入 Vite 的 ESM 版本。Vite 的 CJS Node API 已弃用。废弃用 CJS 节点。已经被废弃，改成使用。
升级 Vite 5 出现警告 The CJS build of Vite‘s Node API is deprecated
最新发布
xiangzhihong8的专栏
04-30 581
当将 “type”: “module” 添加到 package.json 中，Node.js 会将 .js 文件作为 ECMAScript Modules (ESM) 来处理。这与在 package.json 中设置 “type”: “module” 相类似，都是为了确保 Node.js 以 ESM 格式解析和执行模块。默认情况下 Node.js 默认将 .js 文件作为 CommonJS (CJS) 模块来处理。Vite 官方 Github 仓库下的 ISSUE：“
Jenkins中构建vue项目过程中vite进程被终止（kill）,导致vue项目构建失败
weixin_44192363的博客
03-07 815
如果是内存耗尽导致的问题，你可以尝试增加构建过程中可用的内存。你可以通过调整构建过程的内存限制来解决。例如，在执行构建命令时添加 --max-old-space-size 参数并指定一个较大的值，比如 --max-old-space-size=4096，表示将 Node.js 的内存限制设置为 4GB。如果你是在命令行中直接使用 Node.js 来执行构建命令，你可以通过设置环境变量来增加内存。如果你是通过 npm 或 Yarn 来运行构建命令，你可以直接在命令行中添加参数来设置内存限制。
Vite 5.0 正式发布，大幅度提升构建性能
QD_ANJING的博客
11-17 652
11 月 16 日，Vite 5.0 正式发布，这是 Vite 道路上的又一个重要里程碑！Vite 现在使用 Rollup 4，这已经代表了构建性能的大幅提升。此外，还有一些新的选项可以改善开发服务器性能。Vite 4 发布于近一年前，它为生态系统奠定了坚实的基础。随着项目继续在共享基础设施上构建，每周 npm 下载量从 250 万跃升至 750 万。框架不断创新，除了 Astro、Nuxt、SvelteKit、Solid Start、Qwik City 等，还看到新的框架加入并使生态系统更加强大。
vue3+vite+antd 后台管理系统基础模板
02-06
vue3+vite+antd后台管理系统 vue3 vite antd 后台管理系统 基础模板 vite秒启动 弃用webpack，解决启动加载过慢的问题
electron+vite+vue3+sqlite3基础框架
12-14
这是一个electron+vite+vue3+sqlite3基础框架，里面都已配置好，开箱即用，压缩包中写了详细的使用说明
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+vite+pinia+electron实现桌面端应用-自定义收藏夹功能
11-01
内容概要：通过vue3+electron实现一个基础的桌面端应用——收藏夹功能。使用了部分vue3的基本功能及方法，了解Electron的一下API的使用，开发中的常用的插件及依赖的使用方法。 适合人群：具备一定编程基础，对vue...
vite源码阅读1：index.cjs
个人博客
06-06 311
【代码】vite源码阅读1：index.cjs。
Vite4项目构建失败原因unresolved peerdependenices vite5.0.0
m0_62402896的博客
11-19 921
兄弟萌,最近vite5发布了,连带着更新了ejs和prettier,原本在package.json里写的^x.x.x不只是vite保持原版本不变,ejs和prettier也保持原作者推荐的最低版本,每个人情况不同,我也是通过报错信息一个个找出版本过新的包的,把。
electron builder打包时，出现errorOut=ERROR: Cannot create symbolic link
vifaceeeeee的博客
11-29 3616
electron builder打包时，出现errorOut=ERROR: Cannot create symbolic link的解决办法
Electron + Vite5 + Vue3 + Ts 的搭建流程及问题记录
YONGEGE
11-22 470
由于长时间没有接过electron的项目，本次搭建时间花费了两天，所以记下来以备后面使用 2023/11/22。
VUE3打包build 报错
mocoll的博客
04-22 1180
解决方法打开package.json包将下面部分修改然后打包。
vite+Vue3+ts之框架搭建过程与踩坑记录(持续补充)
可可的博客
08-20 4457
_dirname 在 vscode 提示语法问题（如下图），是因为 ts 配置不支持 node，安装 @types/node， 并将 tsconfig.json 中的 compilerOptions.module 从 commonjs 改成 esnext。可以使用npm创建新项目，也可以使用yarn创建新项目，如果没有yarn环境,需要npm install yarn，然后进入环境变量中将bin文件目录引入在系统文件中的path路径。var()函数可以代替元素中任何属性中的值的任何部分。
electron+vue3全家桶+vite项目搭建【五】集成Pinia全局状态管理
个人网站：https://www.longzipeng.online
04-02 2077
vue3全家桶，集成Pinia全局状态管理
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（一）
宁波阿成的博客
03-04 611
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（一）
vue3+vite+electron项目搭建
05-26
搭建一个基于 Vue3、Vite 和 Electron 的项目，可以按照以下步骤进行： 1. 创建一个空的文件夹，打开终端并进入该文件夹，执行以下命令： ```bash npm init -y ``` 2. 安装依赖： ```bash npm install --save-dev vue@next @vitejs/plugin-vue @vue/compiler-sfc electron vite electron-builder ``` 3. 在项目根目录下创建一个 `src` 文件夹，用于存放 Vue 代码。 4. 在项目根目录下创建一个 `main.js` 文件，用于启动 Electron 应用程序。在该文件中编写以下代码： ```javascript const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true, }, }) // 加载 Vue 项目 win.loadURL(`file://${path.join(__dirname, '../dist/index.html')}`) } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 5. 在项目根目录下创建一个 `vite.config.js` 文件，用于配置 Vite。在该文件中编写以下代码： ```javascript const { defineConfig } = require('vite') const vue = require('@vitejs/plugin-vue') module.exports = defineConfig({ plugins: [vue()], build: { outDir: '../dist', }, }) ``` 6. 在 `package.json` 文件中添加以下脚本： ```json "scripts": { "serve": "vite", "build": "vite build", "electron": "electron ." } ``` 7. 在终端中执行以下命令启动开发服务器： ```bash npm run serve ``` 8. 在终端中执行以下命令启动 Electron 应用程序： ```bash npm run electron ``` 现在，你已经成功搭建了一个 Vue3、Vite 和 Electron 的项目。可以在 `src` 文件夹中编写 Vue 代码，然后使用 `npm run build` 命令打包应用程序。打包完成后，可以在 `dist` 文件夹中找到生成的可执行文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值