背景:
想用vue3+vite2搭建项目,发现对node.js有要求。Vite 需要 Node.js 版本 >= 12.0.0。但是公司前端项目均是用jenkins自动化部署,在jenkins中拉包再编译的。而这时发现jenkins上的nodejs版本过低,尝试过安装新版本nodejs没有成功,原因找了很久,原因是服务器操作系统太低,nodejs的依赖问题造成的。考虑到影响面,不可能重新装服务器的。所以才想到前端编译好代码再拉到服务器上。
- 安装rimraf,相当于UNIX 命令 rm -rf。
npm install rimraf --save-dev
- 安装压缩文件夹插件filemanager-webpack-plugin。
npm install filemanager-webpack-plugin --save-dev
- 配置vue.config.js:(
这里请忽略“speed-measure-webpack-plugin”打包速度分析插件)
const isdev = process.env.VUE_APP_NODE_ENV !== 'production';
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); // 打包速度分析插件
const smp = new SpeedMeasurePlugin();
const FileManagerPlugin = require('filemanager-webpack-plugin'); // 压缩文件夹
... ...
module.exports = {
... ...
configureWebpack: smp.wrap({
plugins: [
... ...
!isdev && new FileManagerPlugin({
events: {
onEnd: {
// delete: [ './dist.zip'],
archive: [{ source: './dist', destination: './dist.zip' }]
}
}
})
]
})
- 配置package.json编译环境命令:(编译并压缩后再删除dist文件夹)
"scripts": {
... ...
"build": "vue-cli-service build",
"build:zip": "vue-cli-service build && rimraf dist",
},
执行npm run build
就能看到根目录下的dist.zip压缩包了,如果要删除dist文件夹则执行npm run build:zip