解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
<p>解决用electron打包Vue工程(Vite)报错<strong>electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED</strong><br>Background: 生产环境通过 Electron 直接加载本地文件系统中的静态资源</p>
<p><img src="https://img2024.cnblogs.com/blog/3715478/202510/3715478-20251017140819375-822782584.png"></p>
<p>注：node后的状态码不重要<br>
明明前端工程可以运行，后端连接也没问题，为什么打包完成后总是连不上网址？<br>
网上常规的排错思路：<br>
• 目标服务未运行<br>
• 端口号配置错误<br>
• 防火墙/安全组拦截<br>
• 跨域策略限制<br>
于是你耗费精力一步步来，到头发现还是没有页面，连接错误<br>
<strong>可是你忽略了一个必要的前提：</strong><br>
<strong>生产环境引用的是经过 Vite 构建、压缩、哈希命名后的文件</strong><br>
<strong>构建后的静态资源（如.html）包含指向编译后 JavaScript 文件的引用</strong><br>
<strong>你想起来在打包过程中或多或少的修改或新增了一些文件，使之看似符合应有的结构</strong><br>
<strong>但即便自己写的代码和网上build后的长相完全一致，打包后也无法被正确引用，因为不是编译过的代码</strong><br>
那如何预先编译一遍所有必要的组件呢？答案很简单，使用npm命令编译一遍：<br>
1.<br>
Terminal: npm run build# 实际执行的是package.json里的scripts.build<br>
2.</p>
<pre><code>"name": "DXY 1st",
"version": "5.3.0",
"private": true,
"description": "DXY 666",
"author": "duandashuaige",
"scripts": {
"build": "vite build"//在你package.json中增加scripts参数
}
</code></pre>
<p>3.打包后会得到根目录下的dist文件夹，dist文件夹里的内容才是打包后机器可以直接引用的文件，里面有：<br>
Assets文件夹，用来存放静态资源（js/CSS/img）<br>
<strong>index.html，关键的入口文件，记得把路径改成引用dist里的资源</strong><br>
……</p>
<p><img src="https://img2024.cnblogs.com/blog/3715478/202510/3715478-20251017140921401-463390699.png"></p>
<p><strong>注意事项：build过程中对源文件已有的报错比较严格，如果没有修好某些小报错，build会失败：</strong></p>
<p><img src="https://img2024.cnblogs.com/blog/3715478/202510/3715478-20251017141158241-1501406624.png"></p>
<p>修好小bug之后就可以美美build咯：</p>
<p><img src="https://img2024.cnblogs.com/blog/3715478/202510/3715478-20251017141225341-201792229.png"></p><br><br>
来源：https://www.cnblogs.com/duandashuaige666/p/19147749/electron_Failed_to_load_URL_ERR
頁:
[1]