vite +vue3-ts架构,我要打包的时候打包成压缩包zip文件

备注:每次打包上传前端文件,换需要每次压缩之后重新上传,为了方便,直接写一个脚本,在打包的时候直接将打包文件压缩

首先,确保你已经构建了你的Vite + Vue 3 + TypeScript项目。你可以运行以下命令来执行构建:

  npm build

安装两个包

npm install adm-zip --save-dev

npm install fs-extra --save-dev

  1. 在项目的根目录下创建一个名为create-zip.js的文件,并添加以下代码:

    const fs = require('fs-extra');
    const AdmZip = require('adm-zip');
    
    // 1. 清空之前的 ZIP 文件(如果存在的话)
    const zipFilePath = './dist.zip';
    if (fs.existsSync(zipFilePath)) {
      fs.removeSync(zipFilePath);
    }
    
    // 2. 创建一个新的 ZIP 文件
    const zip = new AdmZip();
    
    // 3. 添加构建产物到 ZIP 文件
    zip.addLocalFolder('./dist');
    
    // 4. 保存 ZIP 文件到根目录
    zip.writeZip(zipFilePath);
    
    console.log('Build completed and saved as dist.zip');
    

  2. 修改package.json    

增加scripts的执行脚本

"scripts": {
 
  "build": "vite build && node create-zip.js",
}

3、最后,在命令行中执行以下命令,以运行构建并创建ZIP文件:

npm run build

这将触发Vite的构建过程,然后将构建产物打包成一个名为dist.zip的ZIP文件,并保存在根目录下。

这个方法应该能够正常工作,并在根目录下生成一个ZIP文件,其中包含了构建产物。如果仍然存在问题,请确保项目结构和配置都正确,并查看是否有任何错误消息或警告。

你可能感兴趣的:(vue,vite)