当前位置：首页 > article >正文

vue打包项目直接输出压缩包，方便部署线上

article 2024/10/31 7:43:22

使用“filemanager-webpack-plugin” 进行打包后操作

第一步使用yarn安装 filemanager-webpack-plugin

yarn add filemanager-webpack-plugin --dev

第二部在，vue.config.js 上进行配置

const FileManagerPlugin = require('filemanager-webpack-plugin');


module.exports = {
...

configureWebpack: {
    plugins: [
      new FileManagerPlugin({
        events: {
          onEnd: {
            mkdir: ['./temp'], // 创建临时目录
            copy: [
              { source: './mobile/**', destination: './temp/mobile/' }, // 将所有文件复制到临时目录
            ],
            archive: [{ source: './temp', destination: './mobile.zip' }],
            delete: ['./temp'], // 压缩后删除临时目录
          },
        },
      }),
    ],

}



...}

说明：输出文件自己进行修改 mobile 名字。

注意事项：不同webpack版本，安装不同版本的 filemanager-webpack-plugin

"@vue/cli-service": "^3.8.3" 使用的是 "filemanager-webpack-plugin": "^8.0.0",

"@vue/cli-service": "3.6.0", 使用的是 "filemanager-webpack-plugin": "2.0.5",

webpack版本太高自行降低filemanager-webpack-plugin试试。

查看全文

http://www.kler.cn/a/372685.html