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

vite学习教程03、vite+vue2打包配置

文章目录

  • 前言
  • 一、修改vite.config.js
  • 二、配置文件资源@/路径提示
  • 三、测试打包
  • 参考文章
  • 资料获取

前言

博主介绍:✌目前全网粉丝3W+,csdn博客专家、Java领域优质创作者,博客之星、阿里云平台优质作者、专注于Java后端技术领域。

涵盖技术内容:Java后端、大数据、算法、分布式微服务、中间件、前端、运维等。

博主所有博客文件目录索引:博客目录索引(持续更新)

视频平台:b站-Coder长路


一、修改vite.config.js

增加如下两个配置:

image-20240810092115576

详细配置内容如下:

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

二、配置文件资源@/路径提示

在一种我们已经配置了resolve.alias也就是路径别名配置。

应用场景:在src目录下创建assets目录文件夹

image-20240810093641541

接着我们来在vue中进行使用:

<!-- 引入方式 -->
<img src="@/assets/image/logo.png" alt="">

image-20240810093720888

成功访问。


三、测试打包

执行vite的打包命令:

npm run build:prod

打包效果:

image-20240810093859651

成功访问:

image-20240810093922252


参考文章

[1]. vue2/3解决项目打包后本地图片等资源找不到的问题]


资料获取

大家点赞、收藏、关注、评论啦~

精彩专栏推荐订阅:在下方专栏👇🏻

  • 长路-文章目录汇总(算法、后端Java、前端、运维技术导航):博主所有博客导航索引汇总
  • 开源项目Studio-Vue—校园工作室管理系统(含前后台,SpringBoot+Vue):博主个人独立项目,包含详细部署上线视频,已开源
  • 学习与生活-专栏:可以了解博主的学习历程
  • 算法专栏:算法收录

更多博客与资料可查看👇🏻获取联系方式👇🏻,🍅文末获取开发资源及更多资源博客获取🍅

相关文章:

vite学习教程03、vite+vue2打包配置

文章目录 前言一、修改vite.config.js二、配置文件资源/路径提示三、测试打包参考文章资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝3W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领域。 涵盖技术内容&…...

Java | Leetcode Java题解之第461题汉明距离

题目&#xff1a; 题解&#xff1a; class Solution {public int hammingDistance(int x, int y) {int s x ^ y, ret 0;while (s ! 0) {s & s - 1;ret;}return ret;} }...

ubuntu 开放 8080 端口快捷命令

文章目录 查看防火墙状态开放 80 端口开放 8080 端口开放 22端口开启防火墙重启防火墙**使用 xhell登录**&#xff1a; 查看防火墙状态 sudo ufw status [sudo] password for crf: Status: inactivesudo ufw enable Firewall is active and enabled on system startup sudo…...

关于头文件为什么要加条件编译语句

因为有些情况重复包含头文件会出现重复定义或者导致多次包含导致增加编译时间。 下述是没有假如条件编译和宏定义的例子&#xff1a; // common_functions.h int addTwoNumbers(int a, int b); // data_structures.h #include "common_functions.h"struct MyStruc…...

strstr

strstr函数原型&#xff1a; char *strstr&#xff08;conset char *s, conset char *s2&#xff09;; 功能&#xff1a;在字符串s中查找字符串s2出现的位置 返回值&#xff1a; 成功&#xff1a;返回第一次出现的s2的地址 失败&#xff1a;NULL...

C语言 | Leetcode C语言题解之第454题四数相加II

题目&#xff1a; 题解&#xff1a; struct hashTable {int key;int val;UT_hash_handle hh; };int fourSumCount(int* A, int ASize, int* B, int BSize, int* C, int CSize, int* D, int DSize) {struct hashTable* hashtable NULL;for (int i 0; i < ASize; i) {for (…...

Leetcode 删除链表倒数第 N 个节点

算法思想&#xff1a; 使用了双指针法。下面是详细的算法思想&#xff1a; 1. 引入虚拟头节点&#xff08;dummy node&#xff09; 为了处理链表的一些边界情况&#xff08;比如删除头节点&#xff09;&#xff0c;我们在链表的头部引入了一个虚拟节点 dummy&#xff0c;并让…...

[移植] tgi 编译

这里写自定义目录标题 报错 报错 Collecting numpy1.26.4 (from -r requirements_cuda.txt (line 21))Downloading numpy-1.26.4.tar.gz (15.8 MB)━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 15.8/15.8 MB 15.0 MB/s eta 0:00:00Inst…...

vue-element-admin后台集成方案

文章目录 vue-element-admin后台集成方案介绍使用安装目录介绍 vue-element-admin后台集成方案 介绍 官方网站 https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD使用 安装 这里有三个模板&#xff0c;我们一般选择基础模板进行开发就好…...

40条经典ChatGPT论文指令,圈定选题和进行论文构思

目录 1、用ChatGPT圈定选题范围2、用ChatGPT生成研究方法和思路3、用ChatGPT扩展论文观点和论证4、用ChatGPT辅助论文结构设计5、如何直接使用ChatGPT4o、o1、OpenAI Canvas6、OpenAI Canvas增强了啥&#xff1f;7、编程功能增强 &#x1f447; ChatGPT o1网页入口在文末&#…...

在不支持WSL2的Windows环境下安装Redis并添加环境变量的方法

如果系统版本支持 WSL 2 可跳过本教程。使用官网提供的教程即可 官网教程 查看是否支持 WSL 2 如果不支持或者觉得麻烦可以按照下面的方式安装 下载 点击打开下载地址 下载 zip 文件即可 安装 将下载的 zip 文件解压到自己想要解压的地方即可。&#xff08;注意&#x…...

《Electron 基础知识》代码打开开发者工具DevTools

初始化 const mainWindow new BrowserWindow({width: 1400,height: 800 );打开 接口 openDevTools mainWindow.webContents.openDevTools();关闭 接口 closeDevTools mainWindow.webContents.closeDevTools();...

小米R3G刷机OP

小米R3G刷机OP 22年购买了一个小米R3G路由器&#xff0c;刷OP系统后可以中继校园网&#xff0c;从而让智能开关、小爱同学可以联网。 当年的价格还是55元&#xff0c;现在只需要30元了&#xff0c;价格越来越便宜&#xff0c;并且OP版本越来越完善了。 之前刷机过breed系统&…...

移动机器人规划控制合集

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 TODO:写完再整理 文章目录 系列文章目录前言 前言 认知有限&#xff0c;望大家多多包涵&#xff0c;有什么问题也希望能够与大家多交流&#xff0c;共同成长&#xff01;…...

Type-C接口桌面显示器的优势

随着科技的飞速发展&#xff0c;电子设备的连接性、便捷性和高效性成为了消费者关注的重点。在这个背景下&#xff0c;Type-C接口桌面显示器以其卓越的性能和广泛的兼容性&#xff0c;正逐步成为市场上的主流选择。本文将深入探讨Type-C接口桌面显示器的优势、应用场景、市场现…...

机器学习中的熵(Entropy)是什么?

在机器学习和信息理论中&#xff0c;熵&#xff08;Entropy&#xff09;是衡量不确定性和信息量的一个重要概念。熵最初由信息论的奠基人克劳德香农&#xff08;Claude Shannon&#xff09;在1948年提出&#xff0c;用来衡量信息源的信息不确定性。在机器学习中&#xff0c;熵被…...

JAVA基础:Lock不同的锁形式

1.1 可重入锁 synchronized就是一个可重入锁 使用lock时&#xff0c;常用的ReentryLock就是可重入锁 当一个线程在获得a对象锁之后&#xff0c;可以继续重复获得对象锁 代码形式就是 线程调用同步代码段&#xff0c;在没有执行完毕前&#xff0c;又调用了该对象的另一个同步…...

【LeetCode每日一题】——679.24 点游戏

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 回溯 二【题目难度】 困难 三【题目编号】 679.24 点游戏 四【题目描述】 给定一个长度为4…...

【Conda】Conda命令详解:高效更新与环境管理指南

目录 1. Conda 更新命令1.1 更新 Conda 核心1.2 更新所有包 2. 严格频道优先级3. 强制安装特定版本4. 创建与管理环境4.1 创建新环境4.2 激活和停用环境4.3 导出和导入环境4.4 删除环境 5. 清理缓存总结 Conda 是一个强大的包管理和环境管理工具&#xff0c;广泛应用于数据科学…...

机器学习:回归模型和分类模型的评估方法介绍

回归模型和分类模型评估方法详解 一、回归模型评估方法 &#xff08;一&#xff09;均方误差&#xff08;MSE&#xff09; 原理 均方误差是衡量回归模型预测值与真实值之间平均平方差的指标。它通过计算预测值与真实值之差的平方的平均值来评估模型的性能。其数学公式为&…...

Video2X AI视频增强实用指南:零基础掌握高效画质提升解决方案

Video2X AI视频增强实用指南&#xff1a;零基础掌握高效画质提升解决方案 【免费下载链接】video2x A lossless video/GIF/image upscaler achieved with waifu2x, Anime4K, SRMD and RealSR. Started in Hack the Valley II, 2018. 项目地址: https://gitcode.com/GitHub_Tr…...

translategemma-12b-it部署案例:基于Ollama的轻量级多模态翻译服务搭建

translategemma-12b-it部署案例&#xff1a;基于Ollama的轻量级多模态翻译服务搭建 想象一下&#xff0c;你正在处理一份满是英文的产品说明书&#xff0c;或者收到了一张包含外文菜单的图片。传统方法可能需要你手动打字、复制粘贴&#xff0c;或者使用多个工具来回切换。现在…...

GTE中文文本嵌入模型实战教程:与LangChain集成构建中文RAG流程

GTE中文文本嵌入模型实战教程&#xff1a;与LangChain集成构建中文RAG流程 1. 引言&#xff1a;为什么需要中文文本嵌入模型 在人工智能快速发展的今天&#xff0c;让计算机真正"理解"中文文本变得越来越重要。无论是智能客服、文档检索还是知识问答&#xff0c;都…...

Android与SpringBoot的轻量级数据桥梁——OkHttp3实战解析

1. OkHttp3与SpringBoot的黄金组合 第一次用OkHttp3对接SpringBoot后端时&#xff0c;我盯着满屏的404错误差点崩溃。后来才发现&#xff0c;原来是因为手机和电脑不在同一个WiFi下。这种看似低级的错误&#xff0c;恰恰是新手最容易踩的坑。OkHttp3作为Android端最流行的网络请…...

开箱即用体验:Z-Image-Turbo文生图镜像实战教程

开箱即用体验&#xff1a;Z-Image-Turbo文生图镜像实战教程 1. 为什么你需要这个镜像&#xff1f;一个真正“零等待”的AI绘图方案 如果你曾经尝试过部署一个AI文生图模型&#xff0c;大概率经历过这样的痛苦&#xff1a;花几个小时配置环境&#xff0c;然后面对几十GB的模型…...

HG-ha/MTools行业实践:短视频工作室AI配音+自动字幕+封面图生成闭环

HG-ha/MTools行业实践&#xff1a;短视频工作室AI配音自动字幕封面图生成闭环 你是不是也遇到过这样的场景&#xff1f;作为短视频工作室的创作者&#xff0c;每天都要面对海量的视频素材。一条1分钟的视频&#xff0c;从剪辑、配音、加字幕到制作封面&#xff0c;前前后后可能…...

从草图到文档:我用这5个Miro/PlantUML模板,高效搞定团队架构设计评审

从草图到文档&#xff1a;5个高效架构设计模板与团队协作实战指南 在敏捷开发环境中&#xff0c;架构设计往往陷入两难困境——既要快速响应需求变化&#xff0c;又要保证设计文档的准确性与可维护性。Tech Lead们经常面临这样的场景&#xff1a;在白板前与团队激情讨论出的架构…...

AI辅助开发:让快马AI听懂你的话,智能定制专属Win11右键菜单

最近在折腾Windows 11的右键菜单&#xff0c;发现新系统的右键菜单虽然简洁&#xff0c;但很多常用功能被折叠到二级菜单里&#xff0c;用起来特别不方便。作为一个开发者&#xff0c;我经常需要快速访问各种工具&#xff0c;于是萌生了自己定制右键菜单的想法。 系统检测模块设…...

矩阵LED与矩阵按键的扫描驱动原理及实现

1. 矩阵LED与矩阵按键的硬件结构解析 第一次接触矩阵LED和矩阵按键时&#xff0c;我完全被那些交叉的线路搞晕了。后来才发现&#xff0c;它们的本质就是行和列的交叉网络。想象一下围棋棋盘&#xff0c;横线是行&#xff0c;竖线是列&#xff0c;每个交叉点就是一颗棋子——在…...

CatBoost实战指南:从算法原理到工业级应用优化

1. CatBoost为什么成为工业界的宠儿&#xff1f; 第一次接触CatBoost是在处理一个电商用户行为预测项目时。当时数据集里充斥着用户ID、商品类别、地域信息这类类别型特征&#xff0c;用XGBoost和LightGBM处理总感觉差点意思。直到尝试了CatBoost&#xff0c;预测效果直接提升了…...