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}}
})

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

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

相关文章

leetcode2739--总行驶距离

1. 题意 典型的空瓶换酒问题。 2. 题解 2.1 直接模拟 class Solution { public:int distanceTraveled(int mainTank, int additionalTank) {int ans 0;while (mainTank > 5) {ans mainTank/5*5;int extra min(mainTank/5, additionalTank);mainTank % 5;mainTank e…

element -ui 横向时间轴,时间轴悬浮对应日期

效果&#xff1a; <el-tabs v-model"activeName" type"card" tab-click"handleClick"><el-tab-pane label"周期性巡视" name"zqxxs" key"zqxxs" class"scrollable-tab-pane"><div v-if…

程序员视角下的AIGC技术:现状、挑战与未来展望

在当今科技日新月异的时代&#xff0c;人工智能生成内容(AIGC)技术正在以前所未有的速度改变着内容创作的格局。作为一名程序员&#xff0c;我密切关注这一领域的发展&#xff0c;并试图从技术角度剖析其现状&#xff0c;探讨未来的趋势。 AIGC技术的发展现状 目前&#xff0…

【11-Ⅱ】Head First Java 学习笔记

HeadFirst Java 本人有C语言基础&#xff0c;通过阅读Java廖雪峰网站&#xff0c;简单速成了java&#xff0c;但对其中一些入门概念有所疏漏&#xff0c;阅读本书以弥补。 第一章 Java入门 第二章 面向对象 第三章 变量 第四章 方法操作实例变量 第五章 程序实战 第六章 Java…

vlan的学习笔记2(vlan间通信)

1.使用路由器的物理接口 原理&#xff1a;在二层交换机上配置VLAN&#xff0c;每个VLAN单独使用一个交换机接口与路由器互联。路由器使用两个物理接口&#xff0c;分别作为VLAN 10及VLAN 20内PC的默认网关&#xff0c;使用路由器的物理接口实现VLAN之间的通信。 实验1&#x…

EasyCVR视频汇聚平台无法自动播放视频的原因排查与解决

国标GB28181协议EasyCVR安防视频监控平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;平台支持7*24小时实时高清视频监控&#xff0c;能同时播放多路监控视频流…

手撕sql面试题:根据分数进行排名,不使用窗口函数

分享一道面试题&#xff1a; 有一个分数表id 是该表的主键。该表的每一行都包含了一场考试的分数。Score 是一个有两位小数点的浮点值。 以下是表结构和数据&#xff1a; Create table Scores ( id int(11) NOT NULL AUTO_INCREMENT, score DECIMAL(3,2), PRIMARY KEY…

Git和SVN有什么区别?

Git和SVN都是版本控制系统&#xff0c;它们都是用来帮助团队协同开发&#xff0c;管理代码版本的。但是&#xff0c;git和svn在实现方式&#xff0c;使用方法&#xff0c;特性等方面都存在一些差异 分布式 vs 集中式 这是二者之间最大的区别。Git是分布式版本控制系统&#xff…

Java23种设计模式-结构型模式之桥接模式

桥接模式&#xff08;Bridge Pattern&#xff09;&#xff1a;将抽象部分与它的实现部分分离&#xff0c;使它们都可以独立地变化。 通常以下角色&#xff1a; 角色1.抽象类&#xff08;Abstraction&#xff09;&#xff1a;定义抽象接口。 角色2.扩展抽象类&#xff08;Refin…

通过nrm管理源地址

安装nrm npm install -g nrm版本及帮助 Options:-V, --version 查看版本号-h, --help 帮助命令如下图 常用命令 Commands:ls 全部注册数据源列表current [options] 显示当前使用的…

ICCV2023人脸识别TransFace论文及代码学习笔记

论文链接&#xff1a;https://arxiv.org/pdf/2308.10133.pdf 代码链接&#xff1a;GitHub - DanJun6737/TransFace: Code of TransFace 背景 尽管ViTs在多种视觉任务中展示了强大的表示能力&#xff0c;但作者发现&#xff0c;当应用于具有极大数据集的人脸识别场景时&#…

SpringMVC 源码剖析

SpringMVC 源码剖析 0 从源码角度分析SpringMVC执行流程 // 前端控制器&#xff0c;SpringMVC最核心的类 public class DispatcherServlet extends FrameworkServlet {// 前端控制器最核心的方法&#xff0c;这个方法是负责处理请求的&#xff0c;一次请求&#xff0c;调用一次…

C语言趣味代码(三)

这一篇主要围绕写一个程序---寻找数字 来写&#xff0c;在这篇我会详细和大家介绍基本实现以及它的改良版&#xff0c;还有相关知识的拓展&#xff0c;干货绝对满满。 1. 寻找数字 在这一主题下&#xff0c;我们会编写一些代码&#xff0c;来锻炼玩家的反应力&#xff0c;同时…

【python源码解析】深入 Pandas BlockManager 的数据结构和初始化过程

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 欢迎加入社区&#xff1a;码上找工作 作者专栏每日更新&#xff1a; LeetCode解锁1000题: 打怪升级之旅 python数据分析…

Vue2学习笔记(尚硅谷天禹老师)

目录 一、入门案例 二、模板语法 三、数据绑定 四、el和data的两种写法 五、MVVM模型 六、Object.defineproperty方法 七、Vue中响应式原理 八、数据代理 九、methods配置项 十、Vue中的事件处理 十一、Vue中的键盘事件 十二、计算属性 十三、监视属性watch 十四、绑定Class样式…

数据库构建中的三范式设计(附SQL实例说明)

数据库构建中的三范式&#xff08;附SQL实例说明&#xff09; 设计数据库时遵循三范式&#xff08;1NF、2NF、3NF&#xff09;是关系型数据库设计中用于减少数据冗余、提高数据一致性的理论基础。 第一范式&#xff1a;任何一张表必须有主键&#xff0c;每个字段原子性不可再分…

主控制文件(项目的开始)食用顺序_3

遇到问题加QQ群聊 群主在线解答 点击加入群聊【星辰开发】 该文档 如有更新 会直接修改此文档 目前版本 2024.4.23 本项目需求 控制文件 尽量不修改 代码要简介快速 控制文件代码如下 from flask import Flask, request# 三种事件扩展包 自行创建 import Group # 群聊事…

玩转微服务-SonarQube

这里写目录标题 第一节 SonarQube1.1 简介1.2 四个组成部分1.2.1 SonarQube服务器1.2.2 SonarQube数据库1.2.3 插件1.2.4 Scanner 1.3 工作流程 第二节 SonarQube的安装2.1 安装2.2 插件 第三节 P3C规范3.1 简介3.2 SonarQube 配置 P3C规范3.3 IDEA配置 P3C规范 第四节 Maven项…

Mybatis-动态SQL

黑马程序员JavaWeb开发教程 文章目录 一、Mybatis-XML映射文件1、XML映射文件&#xff08;1&#xff09;规范&#xff08;2&#xff09;MybatisX 二、Mybatis-动态SQL-if1、动态SQL2、 标签<if><where>3、示例 三、Mybatis-动态SQL-foreach根据 id 批量删除员工1、…

踩坑npm install qrcodejs2和crypto-js

在VSCode输入以下命令时&#xff1a; npm run dev 报错找不到crypto-js依赖。 通过以下命令安装crypto-js依赖。 npm install --save crypto-js 然后再次运行启动命令继续报错&#xff0c;这次报错找不到qrcodejs2依赖&#xff0c;通过以下命令安装qrcodejs2依赖&#xff…