electron-vue本地运行时样式整体缩小，打包后恢复

最新推荐文章于 2025-09-17 05:14:43 发布
转载 最新推荐文章于 2025-09-17 05:14:43 发布 · 496 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5aed13166fb9a07aa047e23a
文章标签：

#javascript #开发工具 #ViewUI

本文描述了一个关于Electron-Vue应用打包后出现的问题：左侧为打包后的效果，右侧为本地运行的效果。作者已尝试重新安装electron-vue及重新安装依赖包但问题仍未解决。

左边是打包后的，右边是本地运行的。并且尝试过重新安装electron-vue，包也重新install过，都没用，求各位大佬帮帮忙啊，拜谢

转载于:https://juejin.im/post/5aed13166fb9a07aa047e23a

Vue+electron-vue跨平台桌面应用开发实战教程（一）
程序客栈
11-02 2321
Vue+electron-vue跨平台桌面应用开发实战教程（一）前言创建项目1.快速安装Vue项目2.集成electron3.运行程序 前言 本文将带领大家使用Vue + electron-builder 搭建桌面应用。 使用到的工具：IDEA 2021、node 创建项目 1.快速安装Vue项目 通过Ctrl/Command+alt+S快捷键打开idea的 Settings（设置）页面，在左侧目录 Plugins（插件）中搜索 Vue。博主这边已经安装过，未安装的小伙伴可以点击Install ，为以后创
Electron+Vue 自定义最大化、最小化、关闭按钮
趁年轻，多学点
08-09 5195
最大化、最小化、关闭是由 主进程（Main） 所控制 如果你要自定义肯定是写在了.vue文件中，也就是说，你自定义的是写在了 渲染进程（Renderer） 中。 首先关闭原有的最大化、最小化、关闭按钮； 在 background.js 文件中，初始化BrowserWindow 时，添加属性 frame:false 在需要实现最大最小化的vue文件中，添加如下代码： const ipcRenderer = require('electron').ipcRenderer; // script标签内，
electron占用内存太高如何优化
weixin_42600128的博客
02-15 5160
如果您的电脑的内存使用率非常高，可能是由于运行的进程占用了太多的内存，其中一个进程可能是 Electron 应用程序。以下是一些优化 Electron 应用程序内存使用的建议： 减少渲染进程的内存使用：您可以通过减少渲染进程使用的内存量来减少 Electron 应用程序的总内存使用量。例如，您可以尽量避免在渲染进程中使用大量的图片和视频，尽可能使用浏览器的缓存来避免重复下载和加载这些资源。 使...
electron-vue进程无法杀死导致任务管理器资源飙升，电脑卡死
前进者
09-29 2346
问题描述 electron打包的exe上线后，由于开机自启动该项目，没有关掉进程的情况下开启多个exe导致任务管理器资源升高，电脑直接卡死的现象 解决思路 在dev-runner.js中找到了关于杀死进程的方法 1 2 3 4 5 6 7 8 9 10 if (electronProcess && electronProcess.kill) { manualRestart..
从卡顿到丝滑：electron-vue应用内存优化实战指南
最新发布
gitblog_00376的博客
09-17 1019
你是否曾遇到electron-vue应用随着使用时间增长而变得越来越卡顿？窗口切换延迟、菜单响应缓慢、甚至在低配置设备上直接崩溃？这些问题的背后往往指向一个共同的元凶——内存占用过高。本文将系统剖析electron-vue应用的内存问题根源，并提供一套经过验证的优化方案，帮助你将应用内存占用降低40%以上，同时保持功能完整性和开发效率。 读完本文你将掌握： - 精确诊断electron-vue内...
vue项目等比例缩放页面
lay7889的博客
01-19 3981
vue项目等比例缩放页面
vue pc项目怎么自适应页面布局，不用zoom属性将整个项目进行缩小根据分辨率自适应适配。
qq_54753561的博客
12-16 5734
vue pc项目怎么自适应页面布局，不用zoom属性将整个项目进行缩小根据分辨率自适应适配。由于项目是pc端的，已经成型了但是页面显得太大了，想把项目整体缩小一点，但是又不想调整所有的布局这可怎么办呢？ 在这里我有3个方案。推荐第3种方案。
在Vue项目中,防止页面被缩放和放大示例
12-13
现在vue的脚手架生成项目之后我们会发现index.html页面中。 在head标签中，我们会看到meta标签中有一条显示是 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> 但是...
Vue 打包体积优化方案小结
11-20
在项目中运行`npm install webpack-bundle-analyzer -save-dev`安装插件后，在`vue.config.js`中进行配置，启用该插件，如下所示： ```javascript module.exports = { chainWebpack: config => { config .plugin...
基于Vue+Electron构建桌面应用程序实践
weixin_42817899的博客
11-20 721
Electron 是由 GitHub 开发的开源库，用于构建拥有 HTML、CSS 和 JavaScript 的跨平台桌面应用程序。Electron 通过把 Chromium 和 Node.js 组合到一个运行时来实现这一点，并且可以为 Mac、Windows 和 Linux 打包应用程序 。 为了快速入门，我使用了 Greg Holguin 的 electron-vue 样板。它给开发人员...
Webpack 与 Electron：桌面应用开发
AI架构全栈开发实战笔记
07-13 930
本文旨在为前端开发者提供一个全面的指南，介绍如何使用Webpack和Electron构建现代化的桌面应用程序。我们将覆盖从基础概念到高级配置的所有内容，包括性能优化和调试技巧。核心概念介绍：Webpack和Electron的基本原理集成方案：如何将两者结合使用实战项目：从零开始构建一个Electron应用高级主题：性能优化和调试技巧未来发展趋势Webpack：一个现代JavaScript应用程序的静态模块打包工具Electron。
electron-vue开发环境内存泄漏问题汇总
12-13
package.json "dependencies": { "vue": "^2.5.16" }, "devDependencies": { "ajv": "^6.5.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-preset-stage-0": "^6.24.1", "babel-register": "^6.26.0",
vue-electron踩坑日记——打包后的体积问题
weixin_41855143的博客
04-29 1万+
本文仅针对vue-electron框架下的打包处理，不一定符合您的情况，请自行辨别 1.问题描述及原因分析      解决了多窗口界面显示问题，发现每次打包的时间都特别长，可是项目大小也就几M，这种情况太异常了，于是去查看了项目大小，发现是300多M，整整大了十倍有余。      因为项目小，需要的...
electron-vue打包后样式变大以及不同分辨率屏幕适配问题
时雨大人的专栏
09-01 9867
背景 公司产品中的桌面程序部分,我选用的是electron-vue的技术方案,最近功能开发完了,npm run build 打包之后发现界面的样式和npm run dev调试时候样式不一样,整体偏大一些,装到另一台电脑,发现差别更大了,怀疑是屏幕分辨率适配的问题,试了一下,果然如此,解决方案很简单,先读取电脑屏幕的系统分辨率,然后做一下缩放适配,这样在不同的电脑上显示效果都一样了. 处理方...
XCel 项目总结 - Electron 与 Vue 的性能优化
测试
11-15 1811
XCEL 是由京东用户体验设计部凹凸实验室推出的一个 Excel 数据清洗工具，其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。XCEL 基于 Electron 和 Vue 2.x，它不仅跨平台（windows 7+、Mac 和 Linux），而且充分利用 Electron 多进程任务处理等功能，使其性能优异。落地页：https://xcel.aotu.io/ ✨✨✨项目地址：http...
electron vue 根据不同的电脑分辨率改窗口大小和让页面适配各种屏幕问题
热门推荐
weixin_44088739的博客
06-12 2万+
根据不同的电脑分辨率改窗口大小 在electron里面的一个main.js改段代码 本项目是开发时候按照1920*1080大小做的,fullscreenable是确定窗口是否全屏的,在低于1920*1080的大小,不同分辨率宽高比例不同,为了页面正常显示,小于1920*1080的,给它设置宽高 function createWindow () { let size = requir...
Vue项目打包后整体页面缩小的坑
小曦的博客
02-23 2684
这两天发现一个特别奇怪的问题，做好的Vue项目打包后页面整体都缩小了，然后去度娘上搜索解决方案，但是上面都是页面放大或者防止页面缩小放大的解决方案，好不容易搜到有类似的标题，但是没有解决方案，百思不得其解，各种方法都试过了，都无济于事，不知道你们是否有遇到过这样的问题？ 后来，我想着将打包后的页面放大看看，结果一打开就发现问题所在了，打包后的页面是按100%来显示的，而打开的本地项目页面是按125...
electron-vue工程搭建
baidu_26872161的博客
09-28 269
1、 安装 vue-cli： npm install -g vue-cli 2、安装脚手架样板代码 vue init simulatedgreg/electron-vue 工程名 脚手架安装 3、工程文件树展示： .electron-vue目录：打包构建的webpack配置 build目录：主要放了应用icon图标、已经存放打包好的应用（如：exe、dmg） di...
解决electron-vue打包依赖资源下载问题的压缩包方案
资源摘要信息:"electron-vue-build-package.zip是一个关于electron-vue打包问题的资源压缩包。由于网络原因，electron-vue在打包过程中可能会遇到一些依赖资源无法下载的问题。为了解决这个问题，所有打包需要下载的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值