关于electron-vue打包后静态视频文件无法正常加载的问题解决方法

最新推荐文章于 2025-07-05 11:14:21 发布

小徐前端

最新推荐文章于 2025-07-05 11:14:21 发布

阅读量2.2k

点赞数 4

CC 4.0 BY-SA版权

文章标签： electron vue.js

本文链接：https://blog.youkuaiyun.com/weixin_46168584/article/details/120236269

本文讲述了在使用electron-builder构建Vue项目时，视频在开发环境下正常但在生产环境无法加载的问题。作者发现解决方案是在electron主进程文件中加入stream:true，通过升级electron版本11及以上来解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在使用electron-builder构建vue项目的时候发现在开发环境下视频可以正常加载并显示，但是一旦打包到生产环境下，视频就读取不出来了，控制台也并没有报错

一开始博主以为是路径问题，在将路径更改为绝对路径后无果，查阅中文官方文档发现有__static这个全局变量，使用无果，最后重点来了，我翻阅到electron-builder的英文官方文档，发现上面赫然写到：

electron-builder无法在生产环境下加载静态视频文件，但是！

可以通过两种途径解决这一问题，其中最简单的方法是使用electron版本11以上的版本，并在主进程文件中加入代码stream: true，主进程文件在我们项目文件下的的src/background.js这里，

只需要将第十行更改为如下图即可：

然后重新打包一下，看看是不是可以了呢~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小徐前端

关注关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Electron+Vue3+ElectronForge整合 - 打包时整合 -分步打包

northcastle的博客

04-23

3252

Electron + Vue3+Electron Forge 打包成桌面程序的全流程步骤，分布打包、手动配置的方式

Electron-vue实战-每日清单---02Electron-vue的目录详解

2401_84006953的博客

04-04

940

相当于index.html ,因为webpack会将他打包成index.html。针对为浏览器构建你的 renderer 进程的源代码。针对 electron 的 renderer 进程。针对 electron 的 main 进程。会安装加载vue-devtools。main进程的主要方法都在这里写。渲染进程，也就是vue所在。vue-router的路由。vue中的main.js。

4 条评论您还未登录，请先登录后发表或查看评论

Electron Vue 打包后视频无法播放

Mystery2020的博客

09-28

2080

Electron Vue 打包后视频无法播放

在electron打包出现无法载入本地视频与图片问题

qq_44824824的博客

03-27

1499

在electron中的启动文件中(通常是background.js或main.js)找到BrowserWindow()在electron打包后出现无法载入本地视频与图片问题，是electron的跨域存在问题。添加webSecurity: false解决跨域限制。

Electron读取静态文件夹文件

最新发布

明知山

07-05

340

中需要额外配置环境，打包后才能正确读取到路径。下的所有文件，然后拼接成一个数组使用。

Electron-Builder打包静态文件

暮影重生

04-08

5306

很多时候，除了打包图片之外还会有很多其他的文件需要打包，通常情况下是打包到asar文件中去，但是在进行文件的读写的时候反而会给自己带来很多不必要的麻烦。在打包的时候electron-builder还给我们带来一个额外的选项，将指定的文件、文件夹打包到resources文件夹下。如何设置这里需要在vue.config.js中添加 //vue.config.js module.exports = { electronBuilder: { builderOptions: {

使用electron-packager打包electron-vue项目的一些问题：打包后的应用程序空白、静态资源无法加载

fu_jian_ping的博客

09-30

5810

最近在使用electron-packager打包electron-vue项目时遇到了一些小问题，下面是我的解决方案： 1、打包后的应用程序打开后是空白的：解决方法：在npm run packager之前先npm run build。 2、图片等静态资源无法加载的问题：打包时一般会将静态资源文件放在“打包文件名\resources\app\dist\electron"路径下，若你的静态文件没有复制到这里，那么应用程序将无法找到，即应用程序会在这个文件夹中找静态资源。解决方法：先把静态资源放

解决electron-vue build 后static/下资源无法加载问题

younger_z的专栏

05-07

6002

electron-vue的界面渲染目录(src/renderer/),，使用的是和vue-cli基本一致的目录结构，static目录路径也和vue-cli一致。一般来说如果直接把原有的vue-cli项目下的src下的文件复制到src/renderer/下，再把static的内容也复制到static下，在webpack.renderer.config.js下像vue-cli里面一样,设置webpa...

vue-admin-element+Electron打包exe可执行文件(输出为dist文件夹即可)

04-24

在提供的压缩包子文件"electron-quick-start-main"中，可能是Electron的快速启动模板的主进程代码，可能包含了初始化Electron应用、加载Vue应用页面等内容，是打包过程中的关键部分。这个模板可以作为构建项目的基础...

vue-cli打包后本地运行dist文件中的index.html操作

10-14

标题和描述中提到的核心知识点是如何使用Vue CLI打包后的项目在本地环境中运行。Vue CLI是Vue.js的官方命令行工具，它简化了Vue.js项目的创建和开发过程。打包是开发周期中的一个关键步骤，通常是将源代码转换为生产...

electron-vue开发，介绍

嚜溟的博客

08-13

6509

开发开始开发环境设置在你使用yarn 或者npm install 安装依赖之后，运行..... yarn run dev # (yarn run dev) 或者 npm run dev 此样板代码附带了几个易于移除的登录页面组件。入口在产品阶段，electron-vue 使用 html-webpack-plugin 创建 index.html。在开发过程中，你将在 s...

vue-electron打包视频未播放

qq_43108067的博客

12-29

2090

在开发环境下视频可以正常加载并显示，但是一旦打包到生产环境下视频就无法播放，查阅发现electron-builder无法在生产环境下加载静态视频文件。解决方法使用electron版本11以上的版本，并在主进程文件中加入代码stream: true，主进程文件在我们项目文件下的的src/background.js。 protocol.registerSchemesAsPrivileged([ { scheme: 'app', privileges: { secure: true, standard: t

使用electron发布将vue打包的dist静态文件作为应用程序打开

qq_43328592的博客

05-09

1427

原理就是把live-server运行项目集成到启动里。npm run start 项目就可以看到效果了。// live-server运行参数。

vue-cli3搭建的electron+vue3+ts加载预脚本preload.js出现问题。

xiaomomo19的博客

09-28

1346

npm run electron:build 打包后报错直接窗口显示空白;问题场景：npm run electron:serve 本地运行查找不到preload.js;

关于 electron-vue打包后静态资源路径失效的解决方案

热门推荐

aa661020的博客

03-30

2万+

关于 electron-vue打包后静态资源路径失效的解决方案 1.静态资源如css,img，js,请放在根目录的static文件夹里，因为electron打包后会复制一份static文件夹到dist文件夹中这样项目引入的静态资源就不会报路径错误了。 2.字体文件比较特殊，如果引入的是前端框架文件，引入的字体路径不是我们能控制的。所以我们需要修改下C:\Users...

vue-cli3项目打包后，静态资源请求失败

黄沙客栈

05-20

3238

今天打包vue-cli3时，扔到服务器上面发现所有的资源都请求失败了，然后去根目录找配置文件，发现没有vue.config这个文件，只有一个babel.config.js这个文件，于是自己创建了一个vue.config文件如下： module.exports = { // 基本路径 publicPath:"./", // 可以设置成相对路径，这样所有的资源都会被链接为相对路径，打出来的包可以被部署在任意路径 outputDir:"dist", //打包时生成的生产环境构建文件的目

electron 打包vue 请求file协议纠正

LeakGas的博客

03-26

2172

并未找到直接解决方法，最后直接在axios拦截器里解决 //axios请求拦截 axios.interceptors.request.use( config => { //... if (!config.url.includes('http')) { config.url = process.env.BASE_URL + config.url //补上你的请求路径 } //... return config; }, err =&gt

Vue3+vite 处理静态资源，解决服务器不显示动态循环img问题

weixin_53339757的博客

11-23

922

Vue3+vite 处理静态资源，解决服务器不显示动态循环img问题

"electron-vue利用webpack打包实现多页面入口文件问题详解

另外，还需要考虑到打包后文件的大小和性能优化。在配置webpack时，可以使用一些优化插件和技术，如代码分割、懒加载等，来提升打包的效率和用户体验。总的来说，利用webpack实现多页面入口在electron-vue项目中是...