Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题

news2024/11/16 9:34:45

vue项目npm run build打包发到服务器上，背景图片消失

问题

登录页背景图片丢失
在这里插入图片描述

控制台报错

在这里插入图片描述

  1. 找到我们的 config文件夹下面的 index.js 配置文件
  2. 找到其中的 build 相关配置，assetsPublicPath 这一项默认配置的是‘/’ 我们将他改成 ‘./’
    在这里插入图片描述

修改后

在这里插入图片描述

修改完成后，重新打包即可

如果还没有解决问题，继续配置

1.找到config下的index.js文件 将build下的assetsPublicPath的斜杠换成./
在这里插入图片描述

  1. 操作如下 修改build/utils.js，添加publicPath:'../../’
    在这里插入图片描述

修改完成后，重新打包即可

第二个就是我们的路由文件中 如果要是选择的是 history 模式 我们需要将其注释掉
在这里插入图片描述

修改完成后，重新打包即可

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【数据结构】初识数据结构与复杂度总结

【数据结构】初识数据结构与复杂度总结

前言 C语言这块算是总结完了，那从本篇开始就是步入一个新的大章——数据结构，这篇我们先来认识一下数据结构有关知识，以及复杂度的相关知识 个人主页：小张同学zkf 若有问题 评论区见 感兴趣就关注一下吧 目录 1.什么是数据结构 2.…
阅读更多...
k8s 部署 canal 集群，RocketMQ 模式

k8s 部署 canal 集群，RocketMQ 模式

k8s 部署 canal 集群，RocketMQ 模式 k8s 部署 canal 集群，RocketMQ 模式前提MySQLRocketMQ制作 canal-admin、canal-server 镜像 部署 zookeeper部署 canal-admin部署 canal-server测试 k8s 部署 canal 集群，RocketMQ 模式 前提 MySQL 开启…
阅读更多...
Excel制作甘特图

Excel制作甘特图

使用Excel表格制作甘特图，可根据任务开始时间和结束时间自动计算工时，并自动用指定颜色填充横道图。 1.新建Excel文档，先设置项目基本信息，包括表格名称，这里设置为“**项目甘特图”；然后添加任务序号列&a…
阅读更多...
移动端WEB开发之响应式布局

移动端WEB开发之响应式布局

一、响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.2 响应式布局容器 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体…
阅读更多...
机器狗首次阵亡！美国警方披露详情

机器狗首次阵亡！美国警方披露详情

ChatGPT狂飙160天，世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 那天，唯一的伤亡者是我们的机器狗。 美国警察最新公布一则案件：波士顿…
阅读更多...
python set是什么类型

python set是什么类型

python set是一种数据类型，数学里的集合概念，在Python语言里对应的是set类型。与list，tuple不同的地方是，set更加强调的是一种“从属关系”（membership），跟顺序无关，所以有重复的元素…
阅读更多...
达梦数据库 索引管理

达梦数据库 索引管理

索引的基本认识 索引是为了快速检索和定位数据行而创建的一种数据结构。索引是由表中索引列数据进行排序后的集合和指向这些值的物理标识（例如：ROWID 等聚集索引键）共同组成。在 DM 中，除了位图索引、位图连接索引、全文索引和空…
阅读更多...
代码随想录算法训练营第二十九天（回溯5）|491. 非递减子序列、46. 全排列、47. 全排列 II(JAVA)

代码随想录算法训练营第二十九天（回溯5）|491. 非递减子序列、46. 全排列、47. 全排列 II(JAVA)

文章目录 491. 非递减子序列解题思路源码 46. 全排列解题思路源码 47. 全排列 II解题思路源码 总结 491. 非递减子序列 给你一个整数数组 nums ，找出并返回所有该数组中不同的递增子序列，递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 …
阅读更多...
练手项目层初阶1—《详解静态版本——通讯录管理系统》

练手项目层初阶1—《详解静态版本——通讯录管理系统》

文章目录 🚩前言🔊 项目需求📚 项目知识点包含🧩项目框架📝框架拆解分析✨Struct_book.h 头文件解析✨Struct_book.c文件解析✨test_book.c文件解析 📺演示效果🚀完整代码 🚩前言 俗…
阅读更多...
Linux下Qt生成程序崩溃文件

Linux下Qt生成程序崩溃文件

文章目录 1.背景2.Qt编译生成程序2.1.profile模式的本质 3.执行程序，得到core文件4.代码定位4.1.直接使用gdb4.2.使用QtCreator 5.总结6.题外话6.1.profile模式和debug模式的区别 1.背景 在使用Qt时，假如在windows，当软件崩溃时，…
阅读更多...
Linux 服务器间SSH免密码登录与拷贝文件（SCP）

Linux 服务器间SSH免密码登录与拷贝文件（SCP）

适用背景 工作中频繁登录服务器和拷贝文件，都会提示输入密码在持续集成的场景下，自动部署应用时是没有人工干预的 解决方案 下面以实现A服务器到B服务器的免密码登录和拷贝文件为例，介绍相关的配置。（即A访问B不需要输密码&…
阅读更多...
不能在主机和虚拟机之间拷贝文本（虚拟机ubuntu16.04）

不能在主机和虚拟机之间拷贝文本（虚拟机ubuntu16.04）

问题 ubuntu16.04不能在主机和虚拟机之间拷贝文本。 原因 vmware tools没安装好。 解决办法 重新安装vmware tools，步骤入下： 让虚拟机加载C:\Program Files (x86)\VMware\VMware Workstation\linux.iso光盘文件，设置如下： …
阅读更多...
DHT11温湿度传感器使用视频教程分享

DHT11温湿度传感器使用视频教程分享

下载地址： 温湿度计(STCDHT11): https://url83.ctfile.com/d/45573183-60623983-9b7f6c?p7526 (访问密码: 7526)
阅读更多...
使用 CloudDM 操作 PostgrgSQL 数据库

使用 CloudDM 操作 PostgrgSQL 数据库

CloudDM 简介 CloudDM 是 ClouGence 公司推出的一款一站式数据库管理工具，使用它可以方便地访问和管理 MySQL、Oracle、PostgreSQL、阿里云 RDS、Greenplum、TiDB、Redis、StarRocks、Doris、SelectDB、SQL SERVER、ClickHouse、OceanBase 、PolarDB-X 、IBM Db2 等…
阅读更多...
JVM之常用监控工具

JVM之常用监控工具

JVM之常用监控工具 jps jinfo 获取配置信息 基本语法 jinfo [options] <pid>常用选项 -sysprops&#xff1a;显示JVM进程的系统属性。-flags&#xff1a;显示用于启动JVM的命令行标志和VM选项。-flag <name>&#xff1a;显示指定JVM标志的当前值。-flag [|-]&…
阅读更多...
vue想要突破全局样式限制又不影响别的页面样式怎么办

vue想要突破全局样式限制又不影响别的页面样式怎么办

<!-- 用scope盖不住全局&#xff0c;随意来个class匹配私定&#xff0c;搜索关键词&#xff1a;不要随便改&#xff0c;乱打class名 --> <style> .lkajsdfjkalsfhkljashkflhaskl .el-input.el-input--default.el-input--suffix { width: 160px !important; } …
阅读更多...
亮数据Bright Data，引领高效数据采集新体验

亮数据Bright Data，引领高效数据采集新体验

随着互联网和大数据的日益普及&#xff0c;我们对于高速、安全和无限畅通的网络体验追求越发迫切&#xff0c;随之而来的网络安全和隐私保护变得越来越重要。IP代理作为一种实用的代理工具&#xff0c;可以高效地帮我们实现网络数据采集&#xff0c;有效解决网络安全问题&#…
阅读更多...
【Java集合进阶】list常见的方法和五种遍历方式数据结构

【Java集合进阶】list常见的方法和五种遍历方式数据结构

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…
阅读更多...
《QT实用小工具·十》本地存储空间大小控件

《QT实用小工具·十》本地存储空间大小控件

1、概述 源码放在文章末尾 本地存储空间大小控件&#xff0c;反应电脑存储情况&#xff1a; 可自动加载本地存储设备的总容量/已用容量。进度条显示已用容量。支持所有操作系统。增加U盘或者SD卡到达信号。 下面是demo演示&#xff1a; 项目部分代码如下&#xff1a; #if…
阅读更多...
jsp中使用cookie+session实现自动登录功能

jsp中使用cookie+session实现自动登录功能

1、需求分析 在实际运用中的用户登陆网站中&#xff0c;多提供有记住密码和自动登陆等功能&#xff0c;方便同一用户短时间内不用再输入用户名和密码等繁琐信息可以快捷登陆。本案例将模拟用户自动登陆功能。 1.2、设计思路&#xff08;实现原理&#xff09; 创建login.html页面…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023