解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED

解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED

Background: 生产环境通过 Electron 直接加载本地文件系统中的静态资源

注:node后的状态码不重要

明明前端工程可以运行,后端连接也没问题,为什么打包完成后总是连不上网址?

网上常规的排错思路:

• 目标服务未运行

• 端口号配置错误

• 防火墙/安全组拦截

• 跨域策略限制

于是你耗费精力一步步来,到头发现还是没有页面,连接错误
可是你忽略了一个必要的前提:
生产环境引用的是经过 Vite 构建、压缩、哈希命名后的文件
构建后的静态资源(如.html)包含指向编译后 JavaScript 文件的引用
你想起来在打包过程中或多或少的修改或新增了一些文件,使之看似符合应有的结构
但即便自己写的代码和网上build后的长相完全一致,打包后也无法被正确引用,因为不是编译过的代码

那如何预先编译一遍所有必要的组件呢?答案很简单,使用npm命令编译一遍:

Terminal: npm run build # 实际执行的是package.json里的scripts.build

复制代码
"name": "DXY 1st",
    "version": "5.3.0",
    "private": true,
    "description": "DXY 666",
    "author": "duandashuaige",
 
 
"scripts": {
 
  "build": "vite build"  //在你package.json中增加scripts参数
 
}

3.打包后会得到根目录下的dist文件夹,dist文件夹里的内容才是打包后机器可以直接引用的文件,里面有:

Assets文件夹,用来存放静态资源(js/CSS/img)
index.html,关键的入口文件,记得把路径改成引用dist里的资源

......

注意事项:build过程中对源文件已有的报错比较严格,如果没有修好某些小报错,build会失败:

修好小bug之后就可以美美build咯:

相关推荐
多看书少吃饭2 小时前
从Vue到Nuxt.js
前端·javascript·vue.js
前端一小卒2 小时前
从 v5 到 v6:这次 Ant Design 升级真的香
前端·javascript
前端不太难3 小时前
《Vue 项目路由 + Layout 的最佳实践》
前端·javascript·vue.js
想学后端的前端工程师3 小时前
【Vue3组合式API实战指南:告别Options API的烦恼】
前端·javascript·vue.js
一勺-_-4 小时前
mermaid图片如何保存成svg格式
开发语言·javascript·ecmascript
hboot5 小时前
💪别再迷茫!一份让你彻底掌控 TypeScript 类型系统的终极指南
前端·typescript
GISer_Jing5 小时前
深入拆解Taro框架多端适配原理
前端·javascript·taro
毕设源码-邱学长5 小时前
【开题答辩全过程】以 基于VUE的藏品管理系统的设计与实现为例,包含答辩的问题和答案
前端·javascript·vue.js
San30.6 小时前
深入理解 JavaScript:手写 `instanceof` 及其背后的原型链原理
开发语言·javascript·ecmascript
北冥有一鲲6 小时前
LangChain.js:RAG 深度解析与全栈实践
开发语言·javascript·langchain