vue解决执行打包之后打开页面空白问题

如果我们在执行了build打包命令之后,打开dist目录下的html文件打开页面空白,有几个常见的问题和解决方法

  1. 检查控制台报错: 打开浏览器的开发者工具,查看控制台(Console)中是否有报错信息。报错信息通常能够提供有关问题的线索。可能是缺失的文件、错误的路径或其他问题。

  2. 相对路径问题: 如果你的应用使用相对路径引用资源,确保这些路径是正确的。在打包后的文件中,相对路径可能会有变化,特别是如果你的应用被部署到不同的路径或服务器上。

  3. 服务器配置问题: 如果你尝试在本地服务器上打开 dist 目录中的 HTML 文件,确保服务器正确处理单页应用的路由。如果是使用 Vue Router 并采用了 history 模式,服务器需要配置以支持这种模式。你可能需要配置服务器以在任何路由请求时返回应用程序的入口 HTML 文件。

  4. 资源引用问题: 确保在 HTML 文件中引用的资源的路径是正确的。这包括样式表、脚本和其他静态资源。在 index.html 中使用绝对路径或相对路径引用这些资源。

  5. 浏览器缓存问题: 尝试清除浏览器缓存,有时候浏览器可能仍然加载旧的文件。

  6. 查看打包输出: 在打包过程中,查看控制台输出以确保没有出现任何错误。检查 webpack 打包的日志,确保没有文件缺失或其他异常情况。

  7. 本地服务器测试: 尝试使用本地服务器打开应用,而不是直接打开文件。你可以使用一些简单的静态文件服务器,比如 servehttp-server。在命令行中进入 dist 目录,然后运行一个本地服务器:

 npx serve  或 npx http-server

可以通过以上方法进行检查,我的是路径问题,如下是我的解决方法

首先,在根目录下新建一个vue.config.js文件,然后再文件中输入以下代码

module.exports={publicPath:'./',
}

然后我们再对数据进行打包,打包完成之后再打开html文件就会发现页面已经有内容

      

 

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

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

相关文章

【头歌实训】kafka-入门篇

文章目录 第1关:kafka - 初体验任务描述相关知识Kafka 简述Kafka 应用场景Kafka 架构组件kafka 常用命令 编程要求测试说明答案代码 第2关:生产者 (Producer ) - 简单模式任务描述相关知识Producer 简单模式Producer 的开发步骤Ka…

JavaScript解构赋值

解构赋值是一种方便的 JavaScript 语法,它允许从数组和对象中快速提取和赋值变量。通过解构赋值,你可以在一个语句中将值从数组或对象中解构出来并赋给多个变量。 数组解构赋值: 数组解构赋值允许你从数组中提取值,并将它们赋给命…

VS Code 运行 Python

介绍 Python: 是一种强大的编程语言,具有广泛的应用领域,可以用于开发 Web 应用、数据分析、人工智能、科学计算等多种领域。 VS Code: 是由微软开发的免费开源代码编辑器,可以在多个平台上运行。具有丰富的扩展功能…

每日一题--------求数字的每⼀位之和

大家好今天的每日一题又来了,有啥不对的请在评论区留言哦 文章目录 目录 文章目录 求数字的每⼀位之和 题⽬描述: 输⼊⼀个整数m,求这个整数m的每⼀位之和,并打印。 一、解题思路 我们可以通过不断获取该整数的个位数&#xff0c…

Python+OpenCV 零基础学习笔记(4-5):计算机图形基础+Python相对文件路径+OpenCV图像+OpenCV视频

文章目录 相关链接运行环境前言计算机图形OpenCV简单使用图形读取文件读取可能会出现的问题:路径不对解决方案其它路径问题解决方案 图像显示保存OpenCV视频视频素材如何获取?简单视频读取 相关链接 【2022B站最好的OpenCV课程推荐】OpenCV从入门到实战 …

python抽象基类之_subclasshook_方法

Python的鸭子特性(duck typing) Python中自定义的类只要实现了某种特殊的协议,就能赋予那种行为,举一个简单的例子: class A:def __len__(self):return 0 a A() print(len(a)) 如上所示,自己定义了一个类…

Synchronized、ReentrantLock 和 ReadWriteLock底层原理

Synchronized 底层原理 1. JVM 层面的实现 synchronized 是 Java 中的一个关键字,它提供了一种简单的策略来实现线程同步。在 JVM 层面,synchronized 可以依赖于对象内部的监视器锁(monitor lock)来实现同步。 锁的获取与释放&a…

GB/T 41480-2022 门和卷帘的防烟性能

门和卷帘的防烟是指在指定的试验温度、压差条件下,烟气从一侧泄露到另一侧的烟气泄露速率。 GB/T 41480-2022 门和卷帘的防烟性能样品要求 门或卷帘试件结构为非对称时,应对结构相对薄弱的一面进行测试,其中常温试验测试一个试件&#xff0…

如何购买腾讯云的服务器(详解腾讯云服务器购买流程)

腾讯云服务器购买流程直接在官方秒杀活动上购买比较划算,在云服务器CVM或轻量应用服务器页面自定义购买价格比较贵,但是自定义购买云服务器CPU内存带宽配置选择范围广,活动上购买只能选择固定的活动机,选择范围窄,但是…

YOLOv5-Lite 树莓派4B 15帧教程

【前言】 由于v5Lite仓库遗漏了不少历史问题,最大的问题是毕业后卷起来了,找不到时间更新。 上面是这篇博客的背景,那么先说下结论,使用 v5lite-e 模型,在 树莓派4B(4G内存) 上,有三…

PyTorch 进阶指南,10个必须知道的原则

PyTorch 是一种流行的深度学习框架,它提供了强大的工具和灵活的接口,使得开发者能够搭建和训练各种神经网络模型。这份指南旨在为开发者提供一些有用的原则,以帮助他们在PyTorch中编写高效、可维护和可扩展的代码。 如果你对 Pytorch 还处于…

树莓派界面改成中文

安装完树莓派系统(Raspberry Pi OS with Desktop),第一次启动时,时会有如下面二个图所示,让你选择区域时区和语言。 树莓派默认的语言为英文,如果你在安装时没有选择的话,默认的区域为英国,语言为英国英文&…

Python新手上路:“用Python和Pygame创造你的流星雨”

文章目录 一、前言二、下载安装过程1.官网下载安装包2.安装python过程第一步第二步第三步第四步第五步安装完成 3.简单测试Python3.1 检查 Python 版本号3.2 打开 Python 解释器3.3 输入你的第一个代码3.4 运行 Python 脚本 4.安装Pygame4.1 cmd命令安装Pygame4.2 pip升级4.3 安…

C++11特性:原子变量

C11提供了一个原子类型std::atomic<T>&#xff0c;通过这个原子类型管理的内部变量就可以称之为原子变量&#xff0c;我们可以给原子类型指定bool、char、int、long、指针等类型作为模板参数&#xff08;不支持浮点类型和复合类型&#xff09;。 原子指的是一系列不可被…

Flask 页面布局layout_main.html

Flask 页面布局layout_main.html 【源码来自编程浪子的flask点餐小程序】 web/templates/common/layout_main.html <!DOCTYPE html> <html> <head><meta charset"utf-8"><meta name"viewport" content"widthdevice-wid…

应对微信小程序用户流失率的有效策略

随着移动互联网的发展&#xff0c;微信小程序已经成为许多企业和个人提供服务、产品的重要平台。然而&#xff0c;高用户流失率仍然是很多开发者面临的挑战之一。在这篇文章中&#xff0c;我们将讨论一些应对微信小程序用户流失率的有效策略&#xff0c;帮助开发者更好地留住用…

【C语言】程序练习(二)

大家好&#xff0c;这里是争做图书馆扫地僧的小白。 个人主页&#xff1a;争做图书馆扫地僧的小白_-CSDN博客 目标&#xff1a;希望通过学习技术&#xff0c;期待着改变世界。 目录 前言 一、运算符练习 1 算术运算符 1.1 练习题&#xff1a; 2 自加自减运算符 3 关系运…

Python列表数据处理全攻略(三):常用内置方法轻松掌握

文章目录 引言Python列表常用内置方法count()功能介绍语法示例注意事项 index()功能介绍语法示例注意事项&#xff1a; insert()功能介绍语法示例注意事项总结 结束语 引言 亲爱的读者&#xff0c;你好&#xff01;Python的列表在数据结构中占据着核心地位&#xff0c;对于学习…

机器学习——损失函数

【说明】文章内容来自《机器学习——基于sklearn》&#xff0c;用于学习记录。若有争议联系删除。 1、简介 损失函数(loss function)又称为误差函数(error function)&#xff0c;是衡量模型好坏的标准&#xff0c;用于估量模型的预测值与真实值的不一致程度&#xff0c;是一个…

基于SVM的冷却剂流量预测,基于支持向量机SVM的冷却剂流量预测

目录 支持向量机SVM的详细原理 SVM的定义 SVM理论 Libsvm工具箱详解 简介 参数说明 易错及常见问题 完整代码和数据下载链接: 基于SVM的冷却剂流量预测,基于支持向量机SVM的冷却剂流量预测(代码完整,数据齐全)资源-CSDN文库 https://download.csdn.net/download/abc991835…