当前位置: 首页 > news >正文

运行Vue项目报错ChunkLoadError: Loading chunk 0 failed.

今天在搭建一个前后端分离的项目,前端报了一个问题,由于我不太了解前端,找了好多办法都没解决。因为是维护老项目,拿到源码大概率是没有问题的(我也是赌的……只能按照没问题来查了),最后耐下心来,仔细检查对比路径,终于发现了问题。
此处假设我的项目名是:myProject

问题

ChunkLoadError: Loading chunk 0 failed.
(error: http://localhost:8082/myProject/static/js/0.js)
假设myProject是我的项目名,大概就报这个错
在这里插入图片描述

解题思路

在这里插入图片描述

我把error后面的地址http://localhost:8082/myProject/static/js/0.js复制到新的浏览器窗口,在控制台看报错信息。报错信息如下:
在这里插入图片描述
我的路径有重复的static/js,由此大概猜到是路径的问题。于是我将这段路径复制到浏览器,并结合我配置的publicPath(在vue.config.js里)。如下图所示:
在这里插入图片描述
如果我配置了publicPath: “./”, 那就意味着访问js的路径在http://localhost:8082/static/js/app.js。我又拿http://localhost:8082/static/js/app.js到浏览器去访问试了一下,果然成功了。
所以我按照注释的提示,去改了publicPath(在vue.config.js里)这个配置,按照我的项目名改成了publicPath: “/myProject/”,再重新运行vue,就解决了。
在这里插入图片描述

总结

公共路径配置的有问题,直接配置到了根下面,如http://localhost:8082/。
请结合浏览器控制台反馈的问题,检查vue.config.js里面的publicPath配置,或许这样你的问题就解决了。
另外,修改了配置一定要重启vue啊!!!!
这个问题卡了我很久,我也是前端小白。但咋说呢,程序没有那么多邪乎的事儿吧,还是要细心耐心的慢慢查。

相关文章:

运行Vue项目报错ChunkLoadError: Loading chunk 0 failed.

今天在搭建一个前后端分离的项目,前端报了一个问题,由于我不太了解前端,找了好多办法都没解决。因为是维护老项目,拿到源码大概率是没有问题的(我也是赌的……只能按照没问题来查了),最后耐下心…...

腾讯云上基于 Apache Pulsar 的大规模生产实践

导语 Pulsar Meetup 2024 北京站已经成功落下帷幕。在本次盛会中,腾讯云的高级工程师韩明泽和王震江为与会者带来了精彩的演讲。他们围绕多网接入、集群迁移以及高可用最佳实践这三大核心议题,深入剖析了《腾讯云上基于 Apache Pulsar 的大规模生产实践…...

Linux网络:序列化与反序列化

Linux网络:序列化与反序列化 序列化与反序列化jsonjsoncppValue对象序列化反序列化WriterReader 序列化与反序列化 在网络通信中,最重要的就是通过接口,将数据通过网络发送给另一台主机。那么另一台主机收到数据后,就可以对数据进…...

Aloudata BIG 主动元数据平台支持 Oracle/DB2 存储过程算子级血缘解析

Aloudata BIG 算子级血缘主动元数据平台已经支持 Oracle 类型、DB2 类型的存储过程算子级血缘解析,并达到 90% 血缘解析准确率: 能够识别准确的字段级数据加工依赖关系;能够识别多级嵌套调用的存储过程的血缘;能够推断存储过程内…...

Java 解决阿里云OSS服务器私有权限图片通过URL无法预览的问题

简单描述一下此场景的业务: 由于系统中需要将上传的图片在系统中展示(private私有权限不能直接通过url直接展示),不想通过先下载下来然后以流的形式返回给前台展示这种方法很不友好,毕竟现在前台展示方式都是通过图片URL进行展示,所以就上官网查看API文档,果然找到了解决…...

HarmonyOS 5.0应用开发——应用打包HAP、HAR、HSP

【高心星出品】 目录 应用打包HAP、HAR、HSPModule类型HAPHAR创建HAR建立依赖HAR共享内容 HSP创建HSP建立依赖同上HSP共享内容同上 HAR VS HSP 应用打包HAP、HAR、HSP 一个应用通常会包含多种功能,将不同的功能特性按模块来划分和管理是一种良好的设计方式。在开发…...

Android demo文件内容记录

<style name"Theme.Demo1" parent"Theme.MaterialComponents.DayNight.DarkActionBar"><!-- Primary brand color. --><item name"colorPrimary">color/purple_500</item>//状态栏的背景色&#xff0c;优先级小于androi…...

掌握SQL高阶技巧,助你提高数据处理的效率和查询性能

高级 SQL 技巧 窗口函数&#xff08;Window Functions&#xff09; 窗口函数允许你对数据集的特定行执行计算&#xff0c;而不会聚合结果。常见的窗口函数包括&#xff1a; ROW_NUMBER()&#xff1a;为每一行分配一个唯一的序号。RANK()&#xff1a;为每一行分配一个排名&am…...

【AI服务器】全国产PCIe 5.0 Switch SerDes 测试和分析,以11槽PCIe GPU底板(PCIe 4.0/5.0)为例(二)

3 PCIe 4.0 SerDes 和 5.0 SerDes 要求比较 表 2 总结 PCIe 4.0 和 5.0 SerDes 要求之间的差 异。PCIe 标准包含三个相互依赖的规范&#xff0c;这些规范 旨在确保不同供应商的 SerDes 和通道的互操作性&#xff1a; ● PCIe BASE 规范定义了整个协议栈的芯片 级性能,是一…...

#数据结构(二)--栈和队列

栈和队列 一栈 1.栈的顺序存储结构 特点&#xff1a;先进后出 栈是一种只能在一端进行插入或删除操作的线性表。 表中允许插入删除操作的一端为栈顶&#xff08;top&#xff09;&#xff0c;表的另一端为栈底&#xff08;bottom&#xff09;&#xff0c; 1 结构体的定义 …...

react18中的函数组件底层渲染原理分析

react 中的函数组件底层渲染原理 react组件没有局部与全局之分&#xff0c;它是一个整体。这点跟vue的组件化是不同的。要实现 react 中的全局组件&#xff0c;可以将组件挂在react上&#xff0c;这样只要引入了react&#xff0c;就可以直接使用该组件。 函数式组件的创建 …...

提升产品竞争力之--IPD产品成本篇

在汉捷的咨询过程中&#xff0c;很多企业老总交流时都会提起这个抱怨&#xff1a;“现在产品竞争太激烈了&#xff0c;客户买产品首先看价格&#xff0c;你价格高一点就买别家的啦……” 汉捷咨询在前文谈到“通过定义产品包需求&#xff0c;来提升产品竞争力。差异化开发&…...

如何在Debian操作系统上安装Docker

本章教程&#xff0c;主要介绍如何在Debian 11 系统上安装Docker。主要使用一键安装Docker脚本和一键卸载脚本来完成。 一、安装Docker #!/bin/bashRED\033[0;31m GREEN\033[0;32m YELLOW\033[0;33m BLUE\033[0;34m NC\033[0mCURRENT_DIR$(cd "$(dirname "$0")…...

ArrayList和Array、LinkedList、Vector 间的区别

一、ArrayList 和 Array 的区别 ArrayList 内部基于动态数组实现&#xff0c;比 Array&#xff08;静态数组&#xff09; 使用起来更加灵活&#xff1a; ArrayList 会根据实际存储的元素动态地扩容或缩容&#xff0c;而 Array 被创建之后就不能改变它的长度了。ArrayList 允许…...

Linux开发环境配置(下)

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…...

系统开发常用命令合集

本文还会持续更新&#xff0c;大家可以点赞收藏~ ifconfig ifconfigwlan0表示无线网络接口 eth0表示以太网接口&#xff08;有线&#xff09; HWaddr是接口的物理地址&#xff08;MAC地址&#xff09; inet addr是接口的IPv4地址 Bcast是广播地址&#xff0c;Mask是子网掩码 …...

Termius工具在MAC的使用出现的问题:

Termius工具在MAC的使用出现的问题&#xff1a; 在使用SFTP时&#xff0c;出现不了本地的文件的位置 解决方案&#xff1a; 在Apple store下载的使用不了LOCAL SFTP&#xff0c; 需要在网页上进行下载才可以&#xff1a; 官网下载地址&#xff1a;https://termius.com/down…...

浅析Android中View的绘制流程

前言 在《浅析Android中View的测量布局流程》中分析了VSYNC信号到达App进程之后开启的View布局过程&#xff0c;经过对整个View树进行遍历进行测量和布局&#xff0c;最终确定View的大小以及在屏幕中所处的位置。但是如果用户想在屏幕上看到View的内容还需要经过绘制来生成图形…...

pikachu靶场- 文件上传unsafe upfileupload

pikachu靶场- unsafe upfileupload 概述client checkMIME typegetimagesize() 概述 不安全的文件上传漏洞概述 文件上传功能在web应用系统很常见&#xff0c;比如很多网站注册的时候需要上传头像、上传附件等等。当用户点击上传按钮后&#xff0c;后台会对上传的文件进行判断…...

java中this的内存原理是?

在Java中&#xff0c;this关键字是一个特殊的引用&#xff0c;指向当前对象的实例。它在以下几个方面发挥重要作用&#xff1a; 指向当前对象&#xff1a;this可以用来访问当前对象的属性和方法&#xff0c;尤其在参数命名与实例变量重名时&#xff0c;用于区分。 构造函数&a…...

Matlab 车牌识别技术

1.1设计内容及要求&#xff1a; 课题研究的主要内容是对数码相机拍摄的车牌&#xff0c;进行基于数字图像处理技术的车牌定位技术和车牌字符分割技术的研究与开发&#xff0c;涉及到图像预处理、车牌定位、倾斜校正、字符分割等方面的知识,总流程图如图1-1所示。 图1-1系统总…...

CUDA-求最大值最小值atomicMaxatomicMin

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 实现原理 atomicMax和 atomicMin是 CUDA 中的原子操作&#xff0c;用于在并行计算中安全地更新共享变量的最大值和最小值。它们确…...

新的Midjourney就是一个增强版的Photoshop,你现在可以轻松的用它换衣服、换发型了

好久没有聊 Midjourney 了&#xff0c;昨晚他们发布了一项引人注目的新功能&#xff1a;AI 图像编辑&#xff0c;一个基于网页的加强版的 Photoshop 呼之欲出&#xff0c;让我大为震撼&#xff0c;也让用户们赞叹不已。 基于现有图像进行参考&#xff0c;进而生成新的图片&…...

Linux系统安装软件的4种方式【源码配置编译安装、yum安装、rpm包安装、二进制软件包安装(.rpm/.tar.gz/.tgz/.bz2)】

一.源码安装 linux安装软件采用源码安装灵活自由&#xff0c;适用于不同的平台&#xff0c;维护也十分方便。 &#xff08;一&#xff09;源码安装流程  源码的安装一般由3个步骤组成&#xff1a; 1.配置&#xff08;configure&#xff09; Configure是一个可执行脚本…...

基于Spring Boot的洪涝灾害应急信息管理系统设计与实现

摘要 近年来&#xff0c;全球气候变化加剧&#xff0c;洪涝灾害频发&#xff0c;给各国的经济发展和人民生活带来了巨大的威胁。为了提高洪涝灾害的应急响应能力&#xff0c;开发高效的应急信息管理系统变得至关重要。本文基于Spring Boot框架&#xff0c;设计并实现了一个洪涝…...

912.排序数组(桶排序)

目录 题目解法 题目 给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 你必须在 不使用任何内置函数 的情况下解决问题&#xff0c;时间复杂度为 O(nlog(n))&#xff0c;并且空间复杂度尽可能小。 解法 class Solution { public:vector<int> sortArray(vect…...

IPC 进程间通信 消息队列

操作系统内核中采用一个链式队列管理消息,每个节点就对应一个消息&#xff1a; 操作系统规定了单个消息的数据长度不能超过8k(8192个字节)&#xff0c;一个消息队列的表长(节点数)最多不超过256个 利用消息队列进行通信的特点&#xff1a; 1. 全双工&#xff1a;任何参与通信的…...

opencv 图像翻转- python 实现

在做图像数据增强时会经常用到图像翻转操作 flip。 具体代码实现如下&#xff1a; #-*-coding:utf-8-*- # date:2021-03 # Author: DataBall - XIAN # Function: 图像翻转import cv2 # 导入OpenCV库path test.jpgimg cv2.imread(path)# 读取图片 cv2.namedWindow(image,1) …...

使用DolphinScheduler接口实现批量导入工作流并上线

使用DS接口实现批量导入工作量并上线脚本 前面实现了批量生成DS的任务&#xff0c;当导入时发现只能逐个导入&#xff0c;因此通过接口实现会更方便。 DS接口文档 DS是有接口文档的地址是 http://IP:12345/dolphinscheduler/swagger-ui/index.html?languagezh_CN&lang…...

pycharm导出环境安装包列表

pycharm导出环境安装包列表 一、导出安装包列表二、安装requirements.txt三、列表显示已安装的包四、显示特定包的信息 一、导出安装包列表 pip freeze > requirements.txt二、安装requirements.txt pip install -r requirements.txt三、列表显示已安装的包 pip list四、…...

模版网站建设步骤详解/建网站的详细步骤

2019独角兽企业重金招聘Python工程师标准>>> 事件 – open/message/close/errorWebSocket#onopen, onmessage, onclose, onerror连接打开时&#xff0c;回调onopen方法&#xff0c;接收到后台消息时会触发到onmessage事件&#xff0c;后台关闭时调用onclose&#xf…...

怎么注册网站个人/百度推广运营这个工作好做吗

市调机构TrendForce指出三季度全球电视面板价格已上涨三成&#xff0c;预期四季度供给紧张的局面不会缓解&#xff0c;液晶面板价格将会进一步上涨&#xff0c;这意味着已执液晶面板牛耳的中国面板企业可望取得业绩的大幅增长。TrendForce认为由于韩国两大液晶面板企业三星已放…...

wordpress标题字体改大/北京网站制作

我们都知道润滑油对机械异常重要&#xff0c;摩托车更甚——润滑减磨、辅助冷却降温、密封防漏、防锈防蚀、减震缓冲……如果你为爱车选错了机油&#xff0c;那么你的爱车一定会“惩罚”你的。坦白讲&#xff0c;什么车型选用什么标号的机油&#xff0c;不需要向老师傅求助&…...

wordpress 最新版/seo的中文含义是

今天研究了个开源项目&#xff0c;数据库是mysql的&#xff0c;其中的脚本数据需要备份&#xff0c;由于本人的机器时mac pro&#xff0c;而且mac下的数据库连接工具都不怎么好用&#xff0c;就想着如何利用windows下的数据库连接工具使用&#xff0c;并做相关备份&#xff0c;…...

做前端网站用什么工具/企业推广是做什么的

请问大家ndk中LOCAL_SHARED_LIBRARIES LOCAL_LDLIBS什么区别啊 我先是编译了一个.so 然后在此次编译的使用调用&#xff0c;请问用LOCAL_SHARED_LIBRARIES和LOCAL_LDLIBS什么区别啊&#xff0c;我用后者能编译通过&#xff0c;用前者不行呢&#xff0c;谢谢&#xff01;&#…...

优的网站建设/网站关键词如何快速上首页

# Author&#xff1a;Allister.Liu # !/usr/bin/env pythonimport time"""装饰器&#xff1a;本质是函数&#xff08;装饰其它函数&#xff09;&#xff0c;就是为其它函数添加附加功能。原则&#xff1a;1、不能修改被装饰的函数的源代码&#xff1b;2、不能修…...