Vue 打包前需修改的配置,解决白屏问题

vue-cli项目和electron-vue项目打包运行都有遇到的白屏问题,下面记录打包前需要确认的配置

第一:
config文件夹下的index.js 中的文件中的 assetsPublicPath :‘/’ 改为’./’ 不然的话会是空白页,记住,是build那块。
在这里插入图片描述        

可以检查打包后的dist/index.html下的引用路径是否为"./static/...."

 

第二:
build/util.js文件下在 ‘vue-style-loader’ 之后加一行:publicPath: ‘…/…/’ 不然的话会有图片显示不出来,字体不能正常使用
在这里插入图片描述

 

第三: 如果你有本地json数据的话
把本地json数据中的路径全部给为根路径
在这里插入图片描述
第四:就是本地用api代理的,上线之后就不要代理了
第五:不需要js文件中的.map文件的时候
config index.js productionSourceMap: false

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/553904.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

electron-vue解决打包错误、无法调用出开发者工具(亲测有效)

错误1: unresolved node modules vue... 或 not found modules..的错误 解决方式:依赖的模块错误,删除node_module文件夹后,尽量用npm install而不是淘宝镜像cnpm安装 错误2: Cannot create symlinks (on Windows hos…

JS中使用bignumber处理高精度小数运算

项目开发中发现精度丢失的问题,如0.10.2 0.30000000000000004的问题 解决方式:引用bignumber.js用于数字精度要求较高的计算。 1、安装或引用: 下载地址:https://github.com/MikeMcl/bignumber.js/releases 或 npm install big…

restful api接口设计

技术由来: 互联网早期,页面请求和并发量不高,且移动端未盛行时对接口要求不高,使用动态页面(jsp)就能满足绝大多数的使用需求。但是随着互联网和移动设备的发展,人们对Web应用的使用需求也增加,传统的动态…

vue-cli安装和使用

主要记录安装vue-cli制定版本和使用,注意vue-cli4创建项目命令和项目结构的改变 检查当前项目的vue-cli版本: vue -V 卸载当前版本: npm uninstall vue-cli -g 安装最新版本: npm install -g vue-cli 安装指定版本: npm in…

Apache 和 Tomcat 服务器的区别

Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML、PHP、JSP、Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置。 Apache是web服务器(静态解析,如HTML)&…

二进制、八进制、十六进制相互转换

一、十进制与二进制之间的转换 1、十进制转二进制 方法为:十进制数除2取余法,即十进制数除2,余数为权位上的数,得到的商值继续除2,依此步骤继续向下运算直到商为0为止。 (具体用法如下图) 2、二…

vue-cli3+与vue-cli2的区别和vue-cli 修改配置

vue-cli3是基于webpack4打造,vue-cli2是基于webpack3vue-cli3的设计原则是“0配置”,移除(隐藏)配置文件build和config等目录vue-cli3提供了vue ui 命令,提供了可视化配置vue-cli3移除了static文件夹,新增了…

electron打包vue-cli4项目的解决方案1(项目实测)

背景: 项目已通过vue-cli4框架开发并运行在nginx服务器上(使用了nginx的反向代理),现需要将该项目转成桌面端应用程序,选择electron来实现。 设想2种解决方案: 1、使用electron-quick-start的loadURL方法…

IP 基础知识“全家桶”,45 张图一套带走!

转载自: https://mp.weixin.qq.com/s/kPjFeefB1Xsbc2bHz_Or1Q 前言 前段时间,有读者希望我写一篇关于 IP 分类地址、子网划分等的文章,他反馈常常混淆,摸不着头脑。 那么,说来就来!而且要盘就盘全一点&am…

浅谈XSS攻击的那些事(附常用绕过姿势)

本文《浅谈XSS攻击的那些事(附常用绕过姿势)》 由一叶知安团队原创投稿安全脉搏首发,作者geek痕,安全脉搏独家首发表本文,如需要转载,请先联系安全脉搏授权;未经授权请勿转载。随着互联网的不断发展&#x…

了解与防御XSS攻击

一. XSS是什么 XSS攻击全称跨站脚本攻击(Cross Site Scripting),是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS,XSS是一种在web应用中的计算机安全漏洞,它允许恶意…

BS架构和CS架构的优缺点

1、CS、BS架构定义 CS(Client/Server):客户端----服务器结构。C/S结构在技术上很成熟,它的主要特点是交互性强、具有安全的存取模式、网络通信量低、响应速度快、利于处理大量数据。因为客户端要负责绝大多数的业务逻辑和UI展示&a…

webService、webSocket、socket、http之间的区别

HTTP HTTP 是基于请求响应式的,即通信只能由客户端发起,服务端做出响应,无状态,无连接。 无状态:每次连接只处理一个请求,请求结束后断开连接。 无连接:对于事务处理没有记忆能力,服…

OSI七层模型传输过程的通俗理解

转自:http://bbs.clnchina.com.cn/thread-1250443-1-1.html 1.OSI七层模型划分。 从上到下依次是:应用层、表示层、会话层、传输层、网络层、数据链路层、物理层。 分层功能应用层网络服务与最终用户的一个接口(可理解为人机交互界面&#xf…

软件开发之常见前端安全漏洞

原标题:软件开发之常见前端安全漏洞 软件开发完成后,在Web服务器在投入使用之前,应该确保服务器是相对安全地。保证服务器相对安全地前提是,要充分了解影响Web系统安全。 1、跨站脚本(XSS)漏洞跨站脚本攻击…

修改el-popover和el-select样式

如图el-popover弹框和el-select下拉项的的容器是div#app之外的,所以在scoped作用域内使用>>>或/deep/修改样式无效。虽然可以使用全局样式修改,但是会造成所有页面组件样式改变。 1、修改el-select选项样式的解决办法: Popper-appen…

vue项目使用electron打包成桌面应用

打包流程详情步骤: 1、准备工作: a、win7系统则确保node版本在v12以上,electron-builder对系统或版本有要求; b、项目路径不使用中文; c、使用淘宝镜像命令代替npm管理工具 npm install -g cnpm --registryhttps://…

Haar特征与积分图—概念解析

1. Adaboost方法的引入 1.1 Boosting方法的提出和发展 在了解Adaboost方法之前,先了解一下Boosting方法。 回答一个是与否的问题,随机猜测可以获得50%的正确率。如果一种方法能获得比随机猜测稍微高一点的正确率,则就可以称该得到这个方法的过…

在jsp中对mysql数据库分页的方法

针对分页,首先开发一个 PageBean 用来控制页面参数: Java代码 package com.longweir; //分页后的javaBean import java.sql.*; import com.longweir.util.*; public class PageBean { private int pageSize5; // 每页显示的记录…

MyEclipse 2015优化技巧

MyEclipse 2015优化速度方案仍然主要有这么几个方面:去除无需加载的模块、取消冗余的配置、去除不必要的检查、关闭更新。第一步: 去除不需要加载的模块 一个系统20%的功能往往能够满足80%的需求,MyEclipse也不例外,我们在大多数时候只需要20…