当前位置: 首页 > 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; 原理 均方误差是衡量回归模型预测值与真实值之间平均平方差的指标。它通过计算预测值与真实值之差的平方的平均值来评估模型的性能。其数学公式为&…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...