文章目录
一、项目使用本地图片打包后不显示
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之后,默认是4kb
assetsInlineLimit: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
}
}
})