在Electron开发中，使用vue-router配置导致打包后显示不正常

最新推荐文章于 2024-09-18 19:41:05 发布
最新推荐文章于 2024-09-18 19:41:05 发布
阅读量464 收藏 3
点赞数 4
文章标签： electron vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hexia233332/article/details/140227248
版权

前言

这两天在用Electron开发的时候，为了实现路由切换，加上了vue-router作为路由跳转，但加上了之后发现，通过run dev运行的时候，所有子组件的功能都是正常的，但是start或者build之后，发现生成的最终可执行文件出现了很多问题。
大概就是，只能显示APP.vue中的东西，路由引入的组件以及static中的js脚本等都无法正常使用

我是使用Electron-vite开发的项目，不保证其他的Electron项目是一样的问题！！！
请添加图片描述

分析 & 解决

既然是界面跳转有问题，那先看看路由配置，找到封装的router路径下，创建路由这块。
请添加图片描述目前的history模式是WebHistory模式，在正常的web请求中，应该不会有什么问题，但Electron打包后毕竟应该和正常的web请求有一点点区别。
（我不是很了解原理，如果有大佬知道欢迎指正）

所以最后就是，把WebHistory模式改成了WebHashHistory模式就正常了，全部功能和run dev的时候一模一样
请添加图片描述
我的界面恢复了正常
请添加图片描述
路由跳转问题也得以解决
请添加图片描述

酥和侠
关注
electron-vite引用vue-router踩坑
lesiyu116的博客
03-23 1014
【代码】electron-vite引用vue-router踩坑。 解决electron-vite中使用vue-router打包后页面不显示
超详细！！！electron-vite-vue开发桌面应用之配置路由router（五）
qq_43206280的博客
08-14 574
在src下新建一个router目录，然后在里面添加一个index.ts文件，在里面配置路由。在src下的main.ts中引入路由。在App.vue中使用路由。点击标签相互路由跳转。
Electron-VUE项目编译后打开页面空白的问题
最新发布
weixin_44341110的博客
09-18 691
它是用 createMemoryHistory() 创建的，并且需要你在调用 app.use(router) 之后手动 push 到初始导航。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。当使用这种历史模式时，URL 会看起来很 “正常”，例如 https://example.com/user/id。
electron+vue3全家桶+vite项目搭建【四】集成vue-router
个人网站：https://www.longzipeng.online
04-02 3159
集成vue-router
electron打包桌面版.exe之vue项目踩坑(vue3+electron 解决打包后首页打开空白，打包后路由不跳转及请求不到后端数据等问题)
qq_21280835的博客
03-27 2587
electron打包桌面版.exe之vue项目踩坑(vue3+electron 解决打包后首页打开空白，打包后路由不跳转及请求不到后端数据等问题)
Electron-Vue 系列之页面路由配置
mm_0123456789的博客
05-20 5603
Electron-Vue loadURL 路由配置 文章目录Electron-Vue loadURL 路由配置一、loadURL使用1、引用本地文件2、引用接口路径二、配置路由1.vue2 示例2. vue3 示例 一、loadURL使用 win.loadURL(url[, options]) url：string options(可选) 使用方式如下（示例）： 1、引用本地文件 win.loadURL("file://${__dirname}/index.html") win.loadURL("ap
Electron开发实战之07-vue-router
joe的博客
08-03 5247
源码 j、源码 j-step-c7 首先安装依赖 bash yarn add vue-router -D 在renderer目录下添加几个文件夹及文件，完成后项目结构差不多如下： renderer │ └───router │ │ router-config.js │ │ routes.js │ └───views │ │ Chat.vue │ ...
electron-vue项目搭建-router自动化模块
小dobby
04-13 2388
electron-vue项目搭建-router自动化模块前言路由生成规则router文件实现main.js 挂载路由文件页面demo 前言 之前使用vue-ts生成了基础项目，后来改用了vue-js，流程方法基本是一样的，参考连接： https://blog.csdn.net/qq_39664702/article/details/124046966 路由生成规则 1. 所有页面 vue 文件，需要全部放在@/src/views 中 2. 页面 vue 文件命名规则统一使用`kebab-case` 小写
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
它包含了Vue CLI工具、Webpack配置、Vue Router、Vuex等，使得在Electron环境中开发Vue应用变得更加简单。通过`electron-vue`，开发者可以在前端界面上使用Vue的全部功能，同时也能处理Electron的本地操作，如访问...
electronic-vue-music：基于electronic-vue开发的音乐播放器，界面模仿QQ音乐，技术栈electron-vue + vue + vuex + vue-router + element-UI。
02-04
注意正式打包需要把图标样式下载到本地，否则正式版图标不显示 网易云音乐API 已经集成到电子 使用文档 用户界面 支持 如果你觉得electron-vue-music节省了你的开发时间，让你少加班，让你能更早的回家陪女友或者打...
vue-electron：vue-blog客户端，基于vue-electron，axios，vuex，vue-router
02-04
客户端，基于vue-electron，axios，vuex，vue-router。 下载 相关截图 构建设置 # install dependencies npm install # serve with hot reload at localhost:9080 npm run dev # build electron application for ...
vue-electron-template-具有启用热重装和常见Vue插件，使用webpack-4配置的开发和构建脚本的Electron＆Vue.js样板-Vue.js开发
05-27
loader，electron-builder和一些最常用的插件（如vue-router，vuex等），从而提供了易于使用的开发环境（带有vscode调试功能），并提供了热模块替换功能。 具有Bulma-Pro，这是一个适用于基于Bulma vue-router vuex ...
基于 electron-vue 开发的音乐播放器，界面模仿QQ音乐，技术栈electron-vue+vue+vuex+vue-r
05-25
这个项目采用的技术栈包括 electron-vue、vue、vuex、vue-router 和 element-ui，它们都是前端开发中的关键组件。 **electron-vue** 是一个用于构建 Electron 应用程序的脚手架，它结合了 Electron 的强大功能与 ...
electron-vue搭建（三）添加element-plus、vue-router
wz121341的博客
08-13 836
3、src下创建views/Home.vue及router/index.js。1、安装element-plus、vue-router。5、启动项目后显示Home页面。4、app.vue添加。2、main.js引入。
Electron-vite引入vue-router控制台报错require is not defined
weixin_42097259的博客
07-10 500
但为什么添加了vue-router它就报错呢，其实是因为路由里面加载了这个页面，而且默认页面就是这个，所以看起来就像是添加了vue-router才导致的报错，其实不然！2.path-browserify这种方案，应该是要在代码中进行修改，这个本人就没去实验了，因为控制台报错点击进去是electron源代码报错。根据第2点，仔细思考了一番，是不是在渲染的代码里面使用了electron相关的包；Electron-vite引入vue-router后，启动报错警告，如图。把相关代码注释掉，问题就解决了。
electron项目打包之后显示空白页面以及发送http请求地址错误
feinifi的博客
09-21 8424
electron项目打包之后首页加载空白，ajax异步请求出现地址错误，跨域问题。
Electron打包的桌面应用程序，运行中程序黑屏、白屏等渲染进程崩溃问题解决
青清一水澈
03-17 8510
Electron打包的桌面应用程序，运行中程序黑屏、白屏等渲染进程崩溃问题解决
Vue-Cli4 Electron 打包后出现router-view失效的可能原因
sinat_34779943的博客
06-29 2071
个人环境 Electron 13.0.0 Vue-Cli 4.5.6 Vue 3.x 版本 在这个版本下，打包后 Electron 在载入的时候不会默认载入到 " / " 这个默认路径下，但是在本地访问的时候会。 这就是为什么使用 yarn run electron:serve 可以正常显示，但是 build 打包后却无法显示 router-view 的原因，解决方法就是在 App.vue 载入的时候，给 mounted 这个钩子里面手动跳转到你想要的首页页面的路径去就可以了。 个人用的是 this.$ro
Electron+vue3+vue-router搭建跨平台桌面应用程序
iphonepl的博客
03-21 664
跨端桌面应用程序electron，vue-router,多窗口。
electron vue打包后白屏
08-26
你好！关于 Electron 和 Vue 打包后出现白屏的问题，可能有几个原因导致。一种可能是你的 Vue 项目在开发环境下是正常运行的，但在 Electron 的生产环境中出现了问题。 首先，你可以检查以下几个方面： 1. 确保你已经正确配置了 Electron 的主进程和渲染进程。主进程通常是一个 Node.js 脚本，用于创建 Electron 应用窗口和处理系统级操作。渲染进程是一个 Chromium 浏览器实例，在其中加载 Vue 应用。 2. 确保你已经正确设置了 Vue 的路由模式。如果你使用了 Vue Router，需要将路由模式设置为 `history`，以确保 Electron 正确处理页面刷新和导航。 3. 检查 Vue 应用的入口文件是否正确设置了路径。在打包后的 Electron 应用中，文件路径可能会发生变化，你需要确保路径的正确性。 4. 检查开发工具的控制台输出，看是否有任何错误或警告信息。这有助于确定问题所在。 另外，如果你使用了 webpack 进行打包，你可能还需要检查相关的 webpack 配置文件，如 `webpack.config.js` 或 `vue.config.js`。确保配置文件中正确设置了入口文件、输出路径等。 如果以上方法都没有解决问题，你可以尝试在 Electron 应用中打开开发者工具，查看是否有其他错误信息。你可以尝试添加以下代码到你的主进程文件中： ```javascript const { app, BrowserWindow } = require('electron') app.on('ready', () => { const mainWindow = new BrowserWindow({ webPreferences: { devTools: true // 打开开发者工具 } }) // 其他代码... }) ``` 这样，当你运行 Electron 应用时，将会自动打开开发者工具。 希望这些提示能帮助你解决问题！如果还有其他疑问，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值