vue3+vite解决项目打包后本地图片等资源找不到的问题

1.在vite.config.js里面做如下配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({base: './', // 打包的静态资源引用路径plugins: [vue()], // 放插件用的resolve: {alias: {'@': '/src' // 配置@/提示符}},
})

上述配置主要就是配置@提示符这样的话就可以@/就能访问src目录下所有的文件了

2.配置@/路径提示

按照下面方式配置一下vscode的@路径提示

  • 1.安装Path Intellisense插件
  • 2.左下角齿轮点击选择设置
  • 3.点击右上角的这个图标 在这里插入图片描述
  • 4.在里面加入下面两行代码
  "path-autocomplete.extensionOnImport": true,"path-autocomplete.pathMappings": {"@": "${folder}/src"}
  • 5.保存退出
  • 6.就会发现@/就有路径提示了

3.使用方法

例如在App.vue里面使用图片的时候(我这里图片文件在src/assets/image文件夹内)

<script setup>
import checkInpng from '@/assets/image/checkIn.png'
import { ref } from 'vue';
const checkIn = ref(checkInpng);
</script><template><div style="font-size: 0.28rem;"><!-- 第一种引入方式 --><img :src="checkIn" alt=""><hr><!-- 第二种引入方式 --><img src="@/assets/image/checkIn.png" alt=""></div>
</template><style scoped lang="less">
</style>

运行后会发现并无问题,地址是src下的路径地址,相当于是访问了src下面的文件,这是没毛病的

在这里插入图片描述
打包后运行项目,会发现这时的路径变成了base64字符串图片,使用base64字符串显示了图片,因此我打包出来的文件也是没图片文件的(除了pubilic里面的图片)

在这里插入图片描述

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

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

相关文章

C++迈向精通:vector复现与sort复现

vector复现 思考过程 对于vector考虑如下几点&#xff1a; 底层数据结构算法实现方式对外表现形式 这里底层的数据结构采用了顺序表&#xff0c;当然&#xff0c;原版STL中的vector也是采用的顺序表。 算法实现的方式放在代码中去设计 对外表现形式是数组&#xff0c;因此需…

[IMX6ULL驱动开发]-Linux对中断的处理(二)

上一篇文章中&#xff0c;引入了Linux对于中断的一些简略流程以及中断抽象为具体实际形象。此文章主要是继续加深对Linux对中断的处理流程以及一些相应的数据结构。 目录 Linux对中断的扩展&#xff1a;硬件中断、软件中断 多中断处理 中断上下部处理流程 发生中断A&#…

Nginx R31 doc-15-Live Activity Monitoring 实时活动监控

前言 大家好&#xff0c;我是老马。很高兴遇到你。 我们为 java 开发者实现了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何处理的&#xff0c;可以参考我的另一个项目&#xff1a; 手写从零实现简易版 tomcat minicat 手写 nginx 系列 …

SpringBoot整合SpringSecurit,实现ajax的登录、退出、权限校验

1、本文章中SpringBoot整合SpringSecurity&#xff0c;只是基于session方式&#xff0c;并且没有使用到redis。 2、登录、登出都是通过ajax的方式进行。 项目目录&#xff1a; 1、pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xm…

FastReport 主子表关系

代码中只需要绑定主表的数据就可以&#xff0c;子表的数据会通过报表中的关连关系自动到数据库中带出。 using CloudSaaS.DB.Handler; using CloudSaaS.Model; using CloudSaaS.DAL; using FastReport; using FastReport.Web; using System; using System.Collections.Generic;…

(2020|ICML PMLR,线性 Transformer,核函数,RNN)Transformer 是 RNN

Transformers are RNNs: Fast Autoregressive Transformers with Linear Attention 公众号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 3. 线性 Transformers 3.1. Transformer 3.2.…

2023、2024国赛web复现wp

2023 Unzip 类型&#xff1a;任意文件上传漏洞 主要知识点&#xff1a;软链接 随便上传一个一句话木马文件&#xff0c;得到一串php代码 根据代码上传zip文件发现进入后还是此页面 代码审计&#xff1a; <?php error_reporting(0); highlight_file(__FILE__);$finfo fin…

Stable Diffusion【写实模型】:逼真,逼真,超级逼真的国产超写实摄影大模型万享XL

今天和大家分享的是一个国产万享系列中使用量最高的大模型:万享XL_超写实摄影&#xff0c;顾名思义&#xff0c;该大模型主要是面向写实摄影&#xff0c;一方面生成的图片人物皮肤纹理细节超级逼真&#xff0c;另一方面对于光影效果的处理也非常到位。对于万享XL超写实摄影大模…

jQuery 下载与快速入门指南

引言 jQuery 是一个广泛使用的 JavaScript 库&#xff0c;它极大地简化了客户端的 HTML 文档遍历、事件处理、动画以及Ajax交互&#xff0c;让Web开发者能够更加高效地实现动态网页效果。本文将指导你如何下载jQuery&#xff0c;并提供一个简单的入门示例来展示其基本用法。 …

揭秘Tensor Core黑科技:如何让AI计算速度飞跃

揭秘 Tensor Core 底层&#xff1a;如何让AI计算速度飞跃 Tensor Core&#xff0c;加速深度学习计算的利器&#xff0c;专用于高效执行深度神经网络中的矩阵乘法和卷积运算&#xff0c;提升计算效率。 Tensor Core凭借混合精度计算与张量核心操作&#xff0c;大幅加速深度学习…

参数高效微调PEFT(二)快速入门P-Tuning、P-Tuning V2

参数高效微调PEFT(二)快速入门P-Tuning、P-Tuning V2 参数高效微调PEFT(一)快速入门BitFit、Prompt Tuning、Prefix Tuning 今天&#xff0c;我们继续了解下来自清华大学发布的两种参数高效微调方法P-Tuning和P-Tuning v2。可以简单的将P-Tuning是认为针对Prompt Tuning的改进…

(二)MySQL 存储引擎

欢迎访问 1. MySQL ⽀持哪些存储引擎&#xff1f;默认使⽤哪个&#xff1f; MyISAM 和 InnoDB&#xff0c;默认InnoDB 2.MyISAM 和 InnoDB 有什么区别&#xff1f; 事务支持&#xff1a; InnoDB 支持事务&#xff0c;具有 ACID&#xff08;原子性、一致性、隔离性、持久性&a…

零基础小白本地部署大疆上云api(个人记录供参考)

文章目录 运行前准备前后端项目运行1.前端项目&#xff1a; 后端项目运行必须先依靠emqx运行必须先依靠redis运行修改后端项目的application.yml文件 运行前准备 1.保证电脑又node.js环境&#xff0c;可以正常使用npm 2.Java的jdk必须是11及以上版本否则无效 3.下载好emqx,red…

《java数据结构》--队列详解

一.认识队列&#x1f431; 初识队列&#x1f638; 队列和栈类似都对数据的存取有着严格的要求&#xff0c;不同的是栈遵循先进后出的原则&#xff0c;而队列遵循先进先出的原则&#xff0c;栈是只有一端可以存取&#xff0c;队列是一端存&#xff0c;一端取。这里我来画一个图…

CSS中的writing-mode属性:解锁文本布局新维度

在网页设计的广阔天地里&#xff0c;CSS&#xff08;层叠样式表&#xff09;扮演着至关重要的角色&#xff0c;它赋予了我们塑造网页外观和布局的强大能力。其中&#xff0c;writing-mode属性是一个常被忽视但功能强大的工具&#xff0c;用于控制文本的书写方向和排列方式。今天…

鸿蒙ArkUI-X跨语言调用说明:【平台桥接开发指南(Android)BridgePlugin】

BridgePlugin (平台桥接) 本模块提供ArkUI端和Android平台端消息通信的功能&#xff0c;包括数据传输、方法调用和事件调用。需配套ArkUI端API使用&#xff0c;ArkUI侧具体用法请参考[Bridge API]。 说明&#xff1a; 开发前请熟悉鸿蒙开发指导文档&#xff1a; gitee.com/li-…

“2024 亚马逊云科技中国峰会,挑战俱乐部 Hands On 动手实验课程正在直播中,点击链接畅享生成式AI建构之旅,赢心动好礼

只看不过瘾&#xff1f;别急&#xff01;我们为您准备了【生成式AI助手 Amazon Q 初体验】动手实验&#xff0c;一款生成式人工智能 (AI) 支持的对话助理&#xff0c;可以帮助您理解、构建、扩展和操作 Amazon 应用程序&#xff0c;您可以询问有关 Amazon 架构、最佳实践、文档…

马斯克开启军备竞赛,xAI筹集60亿美元

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调重新阅读。而最新科技&#xff08;Mamba&#xff0c;xLSTM,KAN&#xff09;则提供了大模…

【MySQL精通之路】SQL优化(1)-查询优化(12)-块嵌套循环和批处理Key访问联接

在MySQL中&#xff0c;可以使用批处理Key访问&#xff08;BKA&#xff09;联接算法&#xff0c;该算法使用对联接表的索引访问和联接缓冲区。 BKA算法支持内联接、外联接和半联接操作&#xff0c;包括嵌套的外部联接。 BKA的优点包括由于更高效的表扫描而提高了联接性能。 此…

ai智能写作怎么样,5款ai写作软件创作文章太棒了

ai智能写作究竟怎么样呢&#xff1f;在当今数字化的时代&#xff0c;AI智能写作正逐渐成为一种引人瞩目的趋势。AI智能写作是指利用人工智能技术来辅助或代替人类进行文本创作的过程。随着人工智能技术的不断发展&#xff0c;AI智能写作在各个领域都呈现出越来越广泛的应用。本…