vue3+vite打包自动生成dist.zip压缩包

先写个生成zip的功能。新建一个zip.js文件,放在和vite.config.js同一级

//  zip.js
const plugin = function(fileName = 'dist', output){
    const path = require('path');            
    if(!output)output = path.resolve(__dirname,'./dist');
    fileName += '.zip';
    const makeZip = function () {
        const path = require('path')
        const fs = require('fs')
        const JSZip = require('jszip');
        const zip = new JSZip()
        const distPath = path.resolve(output)
        const readDir = function (zip, dirPath) {
            // 读取dist下的根文件目录
            const files = fs.readdirSync(dirPath);
            files.forEach(fileName => {
                const fillPath = path.join(dirPath, "./", fileName)
                const file = fs.statSync(fillPath);
                // 如果是文件夹的话需要递归遍历下面的子文件
                if (file.isDirectory()) {
                    const dirZip = zip.folder(fileName);
                    readDir(dirZip, fillPath);
                } else {
                    // 读取每个文件为buffer存到zip中
                    zip.file(fileName, fs.readFileSync(fillPath))
                }
            });
        }
        const removeExistedZip = () => {
            const dest = path.join(distPath, './' + fileName)
            if (fs.existsSync(dest)) {
                fs.unlinkSync(dest)
            }
        }
        const zipDir = function () {
            readDir(zip, distPath);
            zip.generateAsync({
                type: "nodebuffer", // 压缩类型
                compression: "DEFLATE", // 压缩算法
                compressionOptions: { // 压缩级别
                    level: 9
                }
            }).then(content => {
                const dest = path.join(distPath, '../' + fileName)
                removeExistedZip()
                // 把zip包写到硬盘中,这个content现在是一段buffer
                fs.writeFileSync(dest, content);
            });
        }
        removeExistedZip()
        zipDir(distPath)
    }
    return {
        name: 'vite-plugin-auto-zip',
        apply: 'build',
        closeBundle(){
            makeZip()
        }
    }
}
module.exports = plugin

在vite.config.js中引入插件

//  vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
import myPlugin from './zip'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
    vue(),
    myPlugin()
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
})

这样就大功告成了

Vue 3 和 Vite 是现代前端开发中的热门组合,Vite 是一个由尤雨溪(Vite的开发者)创建的高性能前端构建工具,它提供了快速的热更新和预构建能力。在使用 Vite 构建 Vue 项目时,你可能会遇到需要在 `vite.config.js` 文件中配置本地代理的情况,以便访问在开发环境下运行的 API 或静态资源。 在 `vite.config.js` 中,你可以使用 `define` 函数定义一个名为 `proxy` 的对象,这个对象的键是你希望访问的服务路径,值是一个配置对象。以下是一个基本的配置示例: ```javascript export default defineConfig({ // ...其他配置 // 本地代理配置 proxy: { '/api': { target: 'http://localhost:8080', // 你要代理的目标服务器地址 changeOrigin: true, // 允许跨域请求 pathRewrite: { '^/api' : '' } // 将请求的路径前缀 '/api' 替换为空字符串 } } }); ``` 在这个例子中: - `/api` 是你在前端应用中想访问的路径,例如 `/api/data`。 - `target` 指定了代理请求发送到的服务器地址。 - `changeOrigin` 设置为 `true`,意味着 Vite 会在发送请求时自动添加 `Origin` 头,处理跨域问题。 - `pathRewrite` 部分用于重写路径,这里将所有以 `/api` 开始的路径映射到目标服务器的根路径。 如果你有多个代理规则,可以在 `proxy` 对象中添加更多条目,每个条目对应不同的服务或路径。 相关问题: 1. Vite 的代理功能是如何实现的? 2. 当我们在生产环境中部署时,是否还需要设置这样的代理配置? 3. 如何在 Vite 中处理动态生成的代理路径?
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夕阳_醉了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值