vite 如何打包 dist 文件到 zip 使用插件 vite-plugin-zip-pack,vue3 ts
开发过程中一个经常做的事就是将 ./dist
文件夹打包成 zip 分发。
每次手动打包还是很费劲的, vite 同样也有能把 ./dist
文件夹打包成 .zip
的插件,当然这个打包的文件夹不一定非得是 ./dist
,可以是任何位置,只要指定好就可以了。
说一下如何实现它。
一、安装 vite 插件 vite-plugin-zip-pack
npm 或 yarn 自行取用
npm i -D vite-plugin-zip-pack
# 或
yarn add -D vite-plugin-zip-pack
二、配置插件 vite-plugin-zip-pack
打开项目中的 vite.config.ts
文件
头部导入 vite-plugin-zip-pack
import zipPack from "vite-plugin-zip-pack"
它是插件,所以需要放到 vite.config.ts
文件的 plugins
里面
zipPack({
inDir: 'dist', // 输入的文件夹,就是要打包的文件夹
outDir: 'archive', // 打包好的 zip 文件放到哪个文件夹下
outFileName: `diary-${timeStringNow}.zip`, // 打包好的文件名,自行定义,这里我定义了一个 timeStringNow 变量,放置了此时此刻的时间 2024-01-06 这样的
pathPrefix: ''
})
它在编辑器中是长这样的:
以防有些朋友不知道它的确切位置,这里放置一下我的 vite.config.ts
完整配置文件:
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from "vite-svg-loader"
import { VitePWA } from 'vite-plugin-pwa'
import { resolve } from 'path'
import zipPack from "vite-plugin-zip-pack" // make dist.zip file
import {dateFormatter} from "./src/utility";
const timeStringNow = dateFormatter(new Date(), 'yyyy-MM-dd hh-mm-ss')
// https://vitejs.dev/config/
export default defineConfig({
server: {
host: '0.0.0.0',// 自定义主机名
port: 8080,// 自定义端口
https: false,
proxy: {
'/dev': {
target: 'http://localhost:3000',
// target: 'http://kylebing.cn:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/dev/, '/'),
},
}
},
base: './',
plugins: [
vue(),
svgLoader(),
VitePWA({
injectRegister: 'auto',
registerType: 'autoUpdate',
devOptions: {
enabled: true // 是否在开发模式下也启用 pwa 配置
},
// MANIFEST PWA https://vite-pwa-org.netlify.app/guide/pwa-minimal-requirements.html
includeAssets: ['logo.svg', 'apple-touch-icon.png', 'mask-icon.svg', 'favicon.png'],
manifest: {
name: '标题日记',
short_name: "日记",
theme_color: "#373737",
start_url: "./",
display: "standalone",
background_color: "#373737",
icons: [
{
src: "logo.svg",
sizes: "512x512",
type: "image/svg+xml",
purpose: "any",
},
{
src: "appicon-apple.png",
sizes: "512x512",
type: "image/png",
purpose: "any",
},
],
},
}),
zipPack({
inDir: 'dist',
outDir: 'archive',
outFileName: `diary-${timeStringNow}.zip`,
pathPrefix: ''
})
],
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
},
},
})
三、运行 build 指令生成对应的文件
上面配置好之后,再运行 npm build
就会自动生成打包 ./dist 打包好的对应的 .zip 文件,像上面的配置,就是取用 ./dist 文件夹的内容,生成 zip
文件到 ./archive 文件夹中,就像这样:
需要注意的是,这个 .zip
文件中的内容是不带 ./dist
这个外置文件夹的,直接就是 ./dist
里面的内容。
也就是说,解压后,没有 dist
这一层文件夹,使用的时候要注意。