vue打包项目直接输出压缩包,方便部署线上
使用“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试试。