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

Vue 3 + Vite项目实战:常见问题与解决方案全解析

文章目录

      • 一、项目使用本地图片打包后不显示
        • 1、在html中时候,本地运行和打包后线上运行都ok。
        • 2、用动态数据,本地运行ok,打包后线上运行不显示
        • 3、适用于处理单个链接的资源文件
        • 4、用动态数据且本地和线上访问都可显示
      • 二、使用插件vite-plugin-zip-pack打包dist文件到zip
        • 1、安装 vite 插件
        • 2、配置插件
      • 三、打包配置vite.config.js
        • 1、打包结构控制
        • 2、手动分包,提取第三方库单独打包
        • 3、全部常用配置

一、项目使用本地图片打包后不显示

1、在html中时候,本地运行和打包后线上运行都ok。
<img src="@/assets/logo.png" >
2、用动态数据,本地运行ok,打包后线上运行不显示
let list=["/src/assets/logo.png","/src/assets/logo.png",
]
// 这个地方的数据如果不用/src,那么本地直接报错。
// 如果是vue3+webpack可以使用require引入,但vite没有require<div v-for="item in list" :key="item"><img :src="item" >
</div>
3、适用于处理单个链接的资源文件
import homeIcon from '@/assets/images/home/home_icon.png'<img :src="homeIcon" />
4、用动态数据且本地和线上访问都可显示

import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用,在一个 JavaScript 模块中,通过相对路径我们就能得到一个被完整解析的静态资源 URL:

let list=[new URL("@/assets/logo.png", import.meta.url).href,new URL("@/assets/logo.png", import.meta.url).href,
]<div v-for="item in list" :key="item"><img :src="item" >
</div>

二、使用插件vite-plugin-zip-pack打包dist文件到zip

开发过程中一个经常做的事就是将 ./dist 文件夹打包成 zip 分发。
每次手动打包还是很费劲的, vite 同样也有能把 ./dist 文件夹打包成 .zip 的插件,当然这个打包的文件夹不一定非得是 ./dist,可以是任何位置,只要指定好就可以了。

1、安装 vite 插件

npm i -D vite-plugin-zip-pack

2、配置插件

vite.config.js

import zipPack from "vite-plugin-zip-pack"
export default defineConfig({plugins: [vue(),zipPack({inDir: 'dist',//要打包的文件夹outDir: 'dist',//打包好的 zip 文件放到哪个文件夹下outFileName: `dist.zip`,// 打包好的文件名pathPrefix: ''}),],
})

这个 .zip 文件中的内容是不带 ./dist 这个外置文件夹的,直接就是 ./dist 里面的内容。
也就是说,解压后,没有 dist 这一层文件夹,使用的时候要注意。

三、打包配置vite.config.js

1、打包结构控制

vite.config.js

export default defineConfig({build:{rollupOptions:{output: {// entry部分的文件命名,我们这里是spa,所以entry写死也没事,多入口的话需要注意了entryFileNames: "assets/js/[name]-[hash].js",// 自定义chunk如何命名法,包含懒加载或者自定义分包的一些内容的命名chunkFileNames: "assets/js/[name]-[hash].js",// 除js之外其他资源的存放assetFileNames: "assets/[ext]/[name]-[hash].[ext]",// 这里注意一下中括号里面的东西都是占位符}}}
})
2、手动分包,提取第三方库单独打包

vite.config.js

export default defineConfig({build:{rollupOptions:{// 我们这里测试一下,将vue全家桶放在一个公共chunk之中manualChunks:{vueall:["vue","vue-router","vuex"]}}}
})

或者

export default defineConfig({build:{rollupOptions:{manualChunks(id) {if (id.includes('vant') || id.includes('vue-router')) {return 'vendor';}if (id.includes('node_modules')) {return 'dependencies';}},}}
})
3、全部常用配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({// 插件部分plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],//构建部分,该部分涉及到打包的相关内容build:{// target指的是js的兼容版本,默认是['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']// 相关值可以是一个es版本(最低支持es2015),或者相关的流浪器版本// 该部分任务由esbuild完成target:"es2015",// 打包之后的文件放的文件夹,该部分其实根据项目不一样是不一样的outDir:"dist",//内联资源限制,图片等资源的请求需要http请求,小于该值的资源可以直接转成base64之后,默认是4kbassetsInlineLimit:4096,//懒加载组件之中的css分离,默认是true,css内联到对应的组件中,false的话项目中用到的css全放到一个css文件中cssCodeSplit:true,// cssTarget该熟悉是针对非主流浏览器使用,给css添加一个转换目标,类似target属性// cssMinify css的最小化压缩方式,我不是很懂,但应该和合并同类项类似// sourcemap:true是否储存sourcemap文件,这个文件记载着js源码和打包后代码的位置关系,方便定位出错,我暂时不知道有什么用// chunkSizeWarningLimitchunk大小限制,会和未压缩之前的chunk大小进行比较,有chunk超过这个值会报警,默认500kb// assetsDir静态资源的存放位置,默认是assets,注意这个静态资源包含了除js之外的其他内容assetsDir:"assets",// rollupOptions// vite使用rollup实现打包,这就是写具体配置的地方,为父没用过,先看一下rollupOptions:{// input不写其实啥事都没有,写的话,spa单页面必须注意要把html页面写进去否则不产生html页面// input:["./src/main.js",'./index.html'],// 出口,这里就涉及比较多的内容output:{// entry部分的文件命名,我们这里是spa,所以entry写死也没事,多入口的话需要注意了entryFileNames: "assets/js/[name]-[hash].js",// 自定义chunk如何命名法,包含懒加载或者自定义分包的一些内容的命名chunkFileNames: "assets/js/[name]-[hash].js",// 除js之外其他资源的存放assetFileNames: "assets/[ext]/[name]-[hash].[ext]",// 这里注意一下中括号里面的东西都是占位符// compact用于压缩rollup产生的临时代码compact: true,// 其他的一些内容// external哪些模块被排除在打包之外,我感觉cdn的引入应该挺需要使用这个// manualChunks自定义公共chunk,在多入口的时候很有用// 我们这里测试一下,将vue全家桶放在一个公共chunk之中manualChunks:{vueall:["vue","vue-router","vuex"]}},// 设置为true之后,后续打包的时候只对更改的模块重新分析,加快打包速度cache:true}}
})

相关文章:

Vue 3 + Vite项目实战:常见问题与解决方案全解析

文章目录 一、项目使用本地图片打包后不显示1、在html中时候&#xff0c;本地运行和打包后线上运行都ok。2、用动态数据&#xff0c;本地运行ok&#xff0c;打包后线上运行不显示3、适用于处理单个链接的资源文件4、用动态数据且本地和线上访问都可显示 二、使用插件vite-plugi…...

飞天使-k8s知识点31-rancher的正确打开方式

文章目录 安装之前优化一下内核参数以及系统内核版本 rancher安装主要是使用以下命令nginx的配置为解决办法 安装之前优化一下内核参数以及系统内核版本 内核版本 4.17 cat > /etc/modules-load.d/iptables.conf <<EOF ip_tables iptable_filter EOF 然后重启服务器…...

Vue.component v2v3注册(局部与全局)组件使用详解

在Vue中&#xff0c;可以通过两种方式注册组件&#xff1a;局部注册和全局注册。 局部注册是在父组件中通过import和components选项注册的组件&#xff0c;仅在当前父组件及其子组件中可用。 // 父组件中import ChildComponent from ./ChildComponent.vue;export default {co…...

HNU-算法设计与分析-作业5

第五次作业【回溯算法】 文章目录 第五次作业【回溯算法】<1> 算法分析题5-3 回溯法重写0-1背包<2> 算法分析题5-5 旅行商问题&#xff08;剪枝&#xff09;<3> 算法实现题5-2 最小长度电路板排列问题<4> 算法实现题5-7 n色方柱问题<5> 算法实现…...

基础之音视频2

01 前言 02 mp 03 mp实例 简易音乐播放器 04 音频 sound-pool 1.作用 播放多个音频&#xff0c;短促音频 2.过程 加载load- 3.示例 模拟手机选铃声 步骤&#xff1a; 创建SoundPool对象&#xff0c;设置相关属性 音频流存入hashmap 播放音频 05 videoview 3gp 体积小 mp4 …...

两小时看完花书(深度学习入门篇)

1.深度学习花书前言 机器学习早期的时候十分依赖于已有的知识库和人为的逻辑规则&#xff0c;需要人们花大量的时间去制定合理的逻辑判定&#xff0c;可以说是有多少人工&#xff0c;就有多少智能。后来逐渐发展出一些简单的机器学习方法例如logistic regression、naive bayes等…...

21【Aseprite 作图】画白菜

1 对着参考图画轮廓 2 缩小尺寸 变成这样 3 本来是红色的描边&#xff0c;可以通过油漆桶工具&#xff08;取消 “连续”&#xff09;&#xff0c;就把红色的轮廓线&#xff0c;变成黑色的 同时用吸管工具&#xff0c;吸取绿色和白色&#xff0c;用油漆桶填充颜色 4 加上阴影…...

2024.05.15 [AI开发配环境]个人使用最新版远程服务器配环境大纲:docker、云盘、ssh、conda等

不包括在宿主机安装docker。 docker 找到心仪的镜像&#xff0c;比如从网上pull&#xff1a;https://hub.docker.com/r/pytorch/pytorch/tags?page&page_size&ordering&name2.0.1 docker pull pytorch/pytorch:2.0.1-cuda11.7-cudnn8-devel# 新建容器 docker r…...

opencv 轮廓区域检测

直线检测 void LineDetect(const cv::Mat &binaryImage) {cv::Mat xImage,yImage,binaryImage1,binaryImage2;// 形态学变化&#xff0c;闭操作 先膨胀&#xff0c;再腐蚀 可以填充小洞&#xff0c;填充小的噪点cv::Mat element cv::getStructuringElement(cv::MORPH_RE…...

2024-5-16

今日安排&#xff1a; 完结 nf_tables 模块的基本学习&#xff0c;然后开始审计源码mount 的使用&#xff0c;学习 namespace (昨昨昨昨天残留的任务)&#xff08;&#xff1a;看我能搁到什么时候静不下心学习新知识就做 CTF 题目&#x1f991;&#x1f991;&#x1f991; 今…...

IT行业的现状与未来:技术创新引领时代变革

随着技术的不断进步&#xff0c;IT行业已成为推动全球经济和社会发展的关键力量。从云计算、大数据、人工智能到物联网、5G通信和区块链&#xff0c;这些技术正在重塑我们的生活和工作方式。本文将探讨当前IT行业的现状及未来发展趋势&#xff0c;并邀请行业领袖、技术专家和创…...

Redis分布式锁【简单版】

文章目录 概要例子1【SETNX EXPIRE】例子2【 Redisson 】 概要 redis分布式锁六种方案 SETNX EXPIRE 方案&#xff1a; 描述&#xff1a;使用Redis的SETNX命令来尝试设置一个键值对&#xff0c;如果该键不存在&#xff0c;则设置成功并设置过期时间&#xff0c;实现锁的功能…...

18.Blender 渲染工程、打光方法及HDR贴图导入

HDR环境 如何导入Blender的HDR环境图 找到材质球信息 在右上角&#xff0c;点击箭头&#xff0c;展开详细部分 点击材质球&#xff0c;会出现下面一列材质球&#xff0c;将鼠标拖到第二个材质球&#xff0c;会显示信息 courtyard.exr 右上角打开已渲染模式 左边这里选择世界…...

VBA在Excel中部首组查字法的应用

VBA在Excel中部首组查字法的应用 文章目录 前言一、网站截图二、操作思路三、代码1.创建数据发送及返回方法2.创建截取字符串中的数值的方法3.获取部首对应的编码4.获取特定部首的汉字运行效果截图前言 使用汉语字典查生字、生词,多用拼音查字法和部首查字法。以前都是用纸质…...

ASP.NET MVC 4升级迁移到ASP.NET MVC 5

背景&#xff1a;今天针对一个老项目进行框架升级&#xff0c;老项目使用的是MVC 4&#xff0c;现在要升级到MVC5。 备份项目.NET升级4.5以上版本通过Nuget&#xff0c;更新或者直接安装包 包名oldVersionnewVersion说明Microsoft.AspNet.Mvc4.0.05.x.xMicrosoft.AspNet.Razo…...

AIGC时代已至,你准备好抓住机遇了吗?

一、行业前景 AIGC&#xff0c;即人工智能生成内容&#xff0c;是近年来人工智能领域中发展迅猛的一个分支。随着大数据、云计算、机器学习等技术的不断进步&#xff0c;AIGC已经取得了显著的成果&#xff0c;并且在广告、游戏、自媒体、教育、电商等多个领域实现了广泛应用。…...

2024CCPC郑州邀请赛暨河南省赛

比赛记录&#xff1a;看群里大家嘎嘎拿牌&#xff0c;自己个人来solo了一下&#xff0c;发现简单到中等题很多&#xff0c;写了两小时出了7题&#xff0c;但是写的比较慢&#xff0c;对难题把握还是不准确 补题 &#xff1a; A题确实巧妙充分利用题目的数据范围来思考问题&…...

Spring 各版本发布时间与区别

版本版本特性Spring Framework 1.01. 所有代码都在一个项目中 2. 支持核心功能IoC、AOP 3. 内置支持Hibernate、iBatis等第三方框架 4. 对第三方技术简单封装。如&#xff1a;JDBC、Mail、事务等 5. 只支持XML配置方式。6.主要通过 XML 配置文件来管理对象和依赖关系&#xff0…...

前端模块导入导出方式

不同的导出方式和相应的导入方式&#xff0c;可以提炼成 3 种类型&#xff1a;name、default 和 list。 以下是使用示例&#xff1a; // Name Export | Name Import // 一个“命名”的导出 export const name value import { name } from ...❌ 错误示例&#xff1a; export…...

docker01-简介和概述

什么是docker&#xff1f; 我们现在开发项目是在windows操作系统使用idea开发&#xff0c;本地windows操作系统上有我们项目所需的jdk&#xff0c;mysql&#xff0c;redis&#xff0c;tomcat等环境&#xff0c;如果我们想打包我们的项目到一个别的服务器上&#xff0c;在别的服…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

链式法则中 复合函数的推导路径 多变量“信息传递路径”

非常好&#xff0c;我们将之前关于偏导数链式法则中不能“约掉”偏导符号的问题&#xff0c;统一使用 二重复合函数&#xff1a; z f ( u ( x , y ) , v ( x , y ) ) \boxed{z f(u(x,y),\ v(x,y))} zf(u(x,y), v(x,y))​ 来全面说明。我们会展示其全微分形式&#xff08;偏导…...

归并排序:分治思想的高效排序

目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法&#xff0c;由约翰冯诺伊曼在1945年提出。其核心思想包括&#xff1a; 分割(Divide)&#xff1a;将待排序数组递归地分成两个子…...

从实验室到产业:IndexTTS 在六大核心场景的落地实践

一、内容创作&#xff1a;重构数字内容生产范式 在短视频创作领域&#xff0c;IndexTTS 的语音克隆技术彻底改变了配音流程。B 站 UP 主通过 5 秒参考音频即可克隆出郭老师音色&#xff0c;生成的 “各位吴彦祖们大家好” 语音相似度达 97%&#xff0c;单条视频播放量突破百万…...

qt+vs Generated File下的moc_和ui_文件丢失导致 error LNK2001

qt 5.9.7 vs2013 qt add-in 2.3.2 起因是添加一个新的控件类&#xff0c;直接把源文件拖进VS的项目里&#xff0c;然后VS卡住十秒&#xff0c;然后编译就报一堆 error LNK2001 一看项目的Generated Files下的moc_和ui_文件丢失了一部分&#xff0c;导致编译的时候找不到了。因…...

LUA+Reids实现库存秒杀预扣减 记录流水 以及自己的思考

目录 lua脚本 记录流水 记录流水的作用 流水什么时候删除 我们在做库存扣减的时候&#xff0c;显示基于Lua脚本和Redis实现的预扣减 这样可以在秒杀扣减的时候保证操作的原子性和高效性 lua脚本 // ... 已有代码 ...Overridepublic InventoryResponse decrease(Inventor…...

Python第七周作业

Python第七周作业 文章目录 Python第七周作业 1.使用open以只读模式打开文件data.txt&#xff0c;并逐行打印内容 2.使用pathlib模块获取当前脚本的绝对路径&#xff0c;并创建logs目录&#xff08;若不存在&#xff09; 3.递归遍历目录data&#xff0c;输出所有.csv文件的路径…...

无头浏览器技术:Python爬虫如何精准模拟搜索点击

1. 无头浏览器技术概述 1.1 什么是无头浏览器&#xff1f; 无头浏览器是一种没有图形用户界面&#xff08;GUI&#xff09;的浏览器&#xff0c;它通过程序控制浏览器内核&#xff08;如Chromium、Firefox&#xff09;执行页面加载、JavaScript渲染、表单提交等操作。由于不渲…...