Electron-Vue 路由报错 "net::ERR_FILE_NOT_FOUND"？哈希路由来拯救！
2024-10-23 13:58:42
在Electron项目中集成Vue Router时，经常会碰到"net::ERR_FILE_NOT_FOUND"错误，这与Electron加载文件的方式和路由模式息息相关。咱们来深入分析一下这个问题，并提供一个简单易懂的解决方案，帮你构建流畅的Electron-Vue应用。
问题根源在哪里？
当你用Vite运行Vue项目（开发模式）时，Vite会启动一个开发服务器，路由模式默认是createWebHistory。这种模式下，URL路径看起来简洁明了，比如/、/about。但是，当你用Electron打包并运行应用时，Electron加载的是本地文件，而不是通过开发服务器提供的URL。这就导致路由找不到对应的文件，然后就蹦出"net::ERR_FILE_NOT_FOUND"错误。
你可能尝试过在vite.config.js里添加base: path.resolve(__dirname, './dist/')，但这会导致开发模式下URL路径变得很长，而且Electron打包后问题依旧存在。因为base选项主要是用来设置静态资源的根路径，它解决不了Electron加载本地文件时的路由问题。
解决方案：哈希路由模式来帮忙
解决这个问题最直接的办法就是用createWebHashHistory路由模式。这种模式下，URL路径会带一个#符号，比如/#/、/#/about。Electron在加载本地文件时，会忽略#后面的部分，自然就不会出现文件找不到的问题了。
具体操作步骤如下：
- 修改
src/router/router.js文件，把createWebHistory换成createWebHashHistory：
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHashHistory(), // 使用哈希路由模式
routes: [
// ...你的路由配置
]
})
export default router
- 重新构建你的Electron应用：
npm run build
npm run electron:start
现在，你的Electron应用应该可以正常加载页面了，"net::ERR_FILE_NOT_FOUND"错误也消失了。
哈希路由模式的优缺点
优点：
- 简单易用： 改一行代码就能解决问题。
- 兼容性好： 适用于各种Electron版本和部署环境。
缺点：
- URL路径不够美观： 带
#符号的URL路径可能看起来不太舒服。 - 不支持HTML5 History API： 无法用浏览器的前进后退按钮导航。
还有其他解决方案吗？
除了哈希路由模式，你还可以试试以下方法：
- 自定义路由逻辑： 你可以根据Electron加载文件的路径，手动处理路由跳转逻辑。
- 使用Electron的
webContents.loadURL方法： 你可以用loadURL方法加载本地文件，并手动设置路由路径。
但这两种方法都比较复杂，需要写更多代码，还可能存在兼容性问题。除非你对Electron和Vue Router非常了解，否则不建议用这两种方法。
常见问题解答
1. 为什么Electron打包后会出现路由问题？
Electron打包后，应用会以本地文件的方式运行，而不是通过Web服务器访问。这时，如果使用createWebHistory路由模式，Electron就无法找到对应的HTML文件，导致出现"net::ERR_FILE_NOT_FOUND"错误。
2. 哈希路由模式会影响SEO吗？
哈希路由模式对SEO的影响很小，因为搜索引擎爬虫通常会忽略#后面的部分。
3. 如何在Electron中使用HTML5 History API？
要使用HTML5 History API，你需要在Electron的主进程中配置webPreferences.webSecurity为false，并在渲染进程中使用createWebHistory路由模式。但这种方法存在安全风险，不建议在生产环境中使用。
4. 如何在Electron中实现自定义路由逻辑？
你可以监听Electron的will-navigate事件，并在事件处理函数中手动处理路由跳转逻辑。
5. 如何调试Electron-Vue应用中的路由问题？
你可以使用Electron的开发者工具来调试路由问题。在Electron应用中按下Ctrl+Shift+I即可打开开发者工具。
希望这篇文章能帮你解决Electron-Vue项目中的路由问题，做出优秀的桌面应用。
