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,一经查实,立即删除!

相关文章

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

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

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超写实摄影大模…

揭秘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的改进…

零基础小白本地部署大疆上云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;一端取。这里我来画一个图…

鸿蒙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;则提供了大模…

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

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

微服务架构下的‘黑带’安全大师:Spring Cloud Security全攻略!

深入探讨了微服务间的安全通信、安全策略设计以及面对经典安全问题的应对策略。无论你是微服务的新手还是资深开发者&#xff0c;都能在本文中找到提升安全功力的秘籍。让我们一起成为微服务架构下的‘黑带’安全大师&#xff01; 文章目录 1. 引言微服务安全挑战与重要性Sprin…

SHELL编程(三)网络基础命令 Makefile

目标 一、网络基础及相关命令&#xff08;一&#xff09;网络相关命令&#xff08;二&#xff09;重启网络服务 二、Makefile&#xff08;一&#xff09;标签式语法&#xff08;二&#xff09;目标:依赖 式语法1. 格式2. 编译流程&#xff1a;预处理 编译 汇编 链接3. 目标和伪…

Java入门基础学习笔记50——ATM系统

1、项目演示&#xff1b; 2、项目技术实现&#xff1b; 1&#xff09;面向对象编程&#xff1a; 每个账户都是一个对象&#xff0c;所以要设计账户类Account&#xff0c;用于创建账户对象封装账户信息。ATM同样是一个对象&#xff0c;需要设计ATM类&#xff0c;代表ATM管理系…

windows tomcat服务注册和卸载

首页解压tomcat压缩包&#xff0c;然后进入tomcat bin目录&#xff0c;在此目录通过cmd进入窗口&#xff0c; 1&#xff1a;tomcat服务注册 执行命令&#xff1a;service.bat install tomcat8.5.100 命令执行成功后&#xff0c;会在注册服务列表出现这个服务&#xff0c;如果…

基于ssm+vue图书管理系统

基于ssmvue图书管理系统 ssm477图书管理系统 相关技术 javassmmysqlvueelementui

索引下推详情-简单入手

一.概念 索引下推&#xff08;Index Pushdown&#xff09;MySQL5.6添加的&#xff0c;是一种优化技术&#xff0c;用于在查询执行时将部分计算移动到存储引擎层&#xff0c;从而减少数据传输和计算的开销&#xff08;减少回表查询次数&#xff09;&#xff0c;提高查询性能。 …